- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Slider SASS Reference
Description
You can change the styles of the components by using SASS Reference.
Variables
The following table lists the SASS variables in the project's settings file that makes this component's default styles to get customized.
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 |
$slider-height It represents slider's default height. |
Number | 0.5rem |
2 |
$slider-width-vertical It represents slider's default width of a vertical slider. |
Number | $slider-height |
3 |
$slider-background It represents slider's track default background color. |
Color | $light-gray |
4 |
$slider-fill-background It represents default color of the active fill color of the slider. |
Color | $medium-gray |
5 |
$slider-handle-height It represents slider handle's default height. |
Number | 1.4rem |
6 |
$slider-handle-width It represents slider handle's default width. |
Number | 1.4rem |
7 |
$slider-handle-background It represents slider handle's default color. |
Color | $primary-color |
8 |
$slider-opacity-disabled It represents disabled slider's default fade amount. |
Number | 0.25 |
9 |
$slider-radius It represents slider's default radius. |
Number | $global-radius |
10 |
$slider-transition It represents transition properties to set to the slider handle and fill. |
Transition | all 0.2s ease-in-out |
Mixins
To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.
slider-container
@include slider-container;
It adds general sliders styles.
slider-fill
@include slider-fill;
It adds general styles for slider's active fill.
slider-handle
@include slider-handle;
It adds general styles for the handles of slider.