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.

foundation_basic_controls.htm
Advertisements