Boolean
$slider-disable-everything: base.$form-disable-everything !default;
Boolean
$slider-disable-horizontal: $disable-everything !default;
Boolean
$slider-disable-vertical: $disable-everything !default;
Boolean
$slider-disable-range: $disable-everything !default;
Boolean
$slider-disable-discrete: $disable-everything !default;
Boolean
$slider-disable-discrete-marks: $disable-discrete !default;
Boolean
$slider-disable-discrete-marks-labels: $disable-discrete-marks !default;
Number
$slider-size: 2rem !default;
Number
$slider-vertical-size: 15rem !default;
Color
$slider-track-color: theme.theme-get-var(primary-color) !default;
Number
$slider-track-active-size: 0.375rem !default;
Color
$slider-track-active-color: null !default;
Color
$slider-track-active-opacity: null !default;
Number
$slider-track-active-z-index: 2 !default;
Number
$slider-track-inactive-size: 0.25rem !default;
Number
$slider-track-inactive-color: null !default;
Number
$slider-track-inactive-opacity: 0.5 !default;
Number
$slider-track-inactive-z-index: 1 !default;
Color
$slider-track-disabled-color: theme.theme-get-var(text-disabled-color) !default;
Number
$slider-mark-height: $track-inactive-size !default;
Number
$slider-mark-width: $track-inactive-size !default;
Number
$slider-mark-border-radius: border-radius.get-var(full) !default;
Color
$slider-mark-light-active-color: theme.theme-get-var(on-primary-color) !default;
Color
$slider-mark-dark-active-color: $mark-light-active-color !default;
Number
$slider-mark-light-active-opacity: 0.38 !default;
Number
$slider-mark-dark-active-opacity: 0.38 !default;
Color
$slider-mark-active-color: theme.get-default-color(
$mark-light-active-color,
$mark-dark-active-color
) !default;
Number
$slider-mark-active-opacity: theme.get-default-color(
$mark-light-active-opacity,
$mark-dark-active-opacity
) !default;
Color
$slider-mark-light-inactive-color: colors.$black !default;
Color
$slider-mark-dark-inactive-color: colors.$white !default;
Color
$slider-mark-inactive-color: theme.get-default-color(
$mark-light-inactive-color,
$mark-dark-inactive-color
) !default;
Number
$slider-mark-light-inactive-opacity: 1 !default;
Number
$slider-mark-dark-inactive-opacity: 0.8 !default;
Number
$slider-mark-inactive-opacity: theme.get-default-color(
$mark-light-inactive-opacity,
$mark-dark-inactive-opacity
) !default;
Number
$slider-mark-inactive-z-index: 1 !default;
Number
$slider-mark-active-z-index: $track-active-z-index + 1 !default;
Number
$slider-thumb-size: 1.25rem !default;
Number
$slider-thumb-border-radius: border-radius.get-var(full) !default;
Number
$slider-thumb-bubble-opacity: 0.3 !default;
Number
$slider-thumb-z-index: $track-active-z-index !default;
Number
$slider-thumb-focus-scale: 2 !default;
Number
$slider-thumb-active-scale: 2.5 !default;
Number
$slider-thumb-disabled-scale: 0.5 !default;
Number
$slider-thumb-mask-scale: 0.8 !default;
Color
$slider-thumb-disabled-color: $track-disabled-color !default;
Number
$slider-tooltip-caret-size: 0.3rem !default;
Number
$slider-tooltip-offset: calc(-1 * ($thumb-size + icon.$spacing)) !default;
Number
$slider-tooltip-z-index: 0 !default;
Number
$slider-container-padding: $thumb-size * 0.5 !default;
Number
$slider-container-addon-spacing: $thumb-size !default;
Number
$slider-transition-duration: transition.$linear-duration !default;
Number
$slider-transition-timing-function: transition.$linear-timing-function !default;
List
$slider-variables: (
color,
active-color,
inactive-color,
size,
active-size,
inactive-size,
vertical-size,
offset-1,
offset-2,
tooltip-scale,
tooltip-translate,
mark-offset,
mark-active-color,
mark-active-opacity,
mark-inactive-color,
mark-inactive-opacity
);
mixin
@mixin set-var($name, $value) { … }
mixin
@mixin use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin use-light-theme { … }
mixin
@mixin use-dark-theme { … }
mixin
@mixin variables { … }
mixin
@mixin styles($disable-layer: false) { … }
function
@function get-var($name, $fallback: null) { … }
String
Set to true
to disable the Slider
styles.
Set to true
to disable the horizontal Slider
styles.
Set to true
to disable the vertical Slider
styles.
Set to true
to disable the two-thumb Slider
styles.
Set to true
to disable the Slider
styles show the current value in a tooltip.
Set to true
to disable the Slider
styles that show the tick marks below the slider track.
Set to true
to disable the Slider
styles that display a label with each tick mark below the slider track.
The height
of the Slider
's track while horizontal or the width
while vertical.
The default height
for a vertical Slider
.
The default color for a Slider
and is applied to:
If more color customization is required, set this to null
and configure the $track-active-color
, $track-active-opacity
,
$track-inactive-color
, and $track-inactive-opacity
instead.
The height/width of the Slider
track representing the current value. This should normally be greater than or equal to the $size
.
Set this value if additional control is required or the Slider
active color.
An optional opacity value to apply to the active Slider
color.
The z-index
for the active Slider
track. This normally shouldn't need to be changed but should be greater than the
$track-inactive-z-index
.
The height/width for the inactive Slider
track.
Set this value if additional control is required or the Slider
inactive color.
The opacity to apply to the Slider
inactive track background color.
The z-index
for the inactive Slider
track. This normally shouldn't need to be changed but should be less than the $track-active-z-index
The background-color to apply to a Slider
track while disabled.
The default height of a discrete Slider
tick mark.
The default width of a discrete Slider
tick mark.
The default border-radius for a discrete Slider
tick mark.
The light theme Slider
tick mark color.
The dark theme Slider
tick mark color.
The light theme Slider
tick mark opacity.
The dark theme Slider
tick mark opacity.
The default Slider
tick mark color.
The default Slider
tick mark opacity.
The light theme color for a Slider
mark that is not covered by the active
Slider
track.
The dark theme color for a Slider
mark that is not covered by the active
Slider
track.
The default color for a Slider
mark that is not covered by the active
Slider
track.
The default opacity to apply to the light theme Slider
mark.
The default opacity to apply to the dark theme Slider
mark.
The default opacity to apply to the Slider
mark.
The z-index for an inactive Slider
mark.
The z-index for an active Slider
mark.
The size for the Slider
thumb.
The border-radius
for the Slider
thumb.
The amount of opacity to apply to the focused/active state of the Slider
thumb.
The z-index
for the Slider
thumb.
The size of the focused state for a Slider
thumb.
The size of the active state for a Slider
thumb.
The size of a disabled Slider
thumb.
The size of a disabled Slider
thumb which is used to apply the spacing between the track and thumb. This should be larger than the
$thumb-disabled-scale
The disabled color for a Slider
thumb.
The discrete Slider
tooltip caret size which is generated using border
.
The top/left for the discrete Slider
tooltip.
The z-index
for the discrete Slider
tooltip.
The amount of padding to apply around the Slider
component and also the
"touch" area for the Slider
. This should generally be at least 1/2 the
$thumb-size
so it does not overlap other elements.
The amount of spacing between a Slider
addon and the SliderTrack
.
The transition-duration
to apply to the Slider
while the next value should animate.
The transition-timing-function
to apply to the Slider
while the next value should animate.
The available configurable css variables and mostly used internally for the
get-var
, set-var
, and use-var
utils.
The supported variable name
The value to set the variable to. Supports null
which will just be a no-op.
The css property to apply the variable to
The supported variable name
An optional fallback value if the variable has not been set
Applies the light the variables based on feature flags
Applies the dark the variables based on feature flags
Conditionally applies the css variables based on feature flags
Generates all the styles based on feature flags.
Set this to true
to disable the layer behavior
a var()
statement
The supported variable name
An optional fallback value