Boolean$slider-disable-everything: base.$form-disable-everything !default;Set to true to disable the Slider styles.
Boolean$slider-disable-horizontal: $disable-everything !default;Set to true to disable the horizontal Slider styles.
Boolean$slider-disable-vertical: $disable-everything !default;Set to true to disable the vertical Slider styles.
Boolean$slider-disable-range: $disable-everything !default;Set to true to disable the two-thumb Slider styles.
Boolean$slider-disable-discrete: $disable-everything !default;Set to true to disable the Slider styles show the current value in a tooltip.
Boolean$slider-disable-discrete-marks: $disable-discrete !default;Set to true to disable the Slider styles that show the tick marks below the slider track.
Boolean$slider-disable-discrete-marks-labels: $disable-discrete-marks !default;Set to true to disable the Slider styles that display a label with each tick mark below the slider track.
Number$slider-size: 2rem !default;The height of the Slider's track while horizontal or the width while vertical.
Number$slider-vertical-size: 15rem !default;The default height for a vertical Slider.
Color$slider-track-color: theme.theme-get-var(primary-color) !default;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.
Number$slider-track-active-size: 0.375rem !default;The height/width of the Slider track representing the current value. This should normally be greater than or equal to the $size.
Color$slider-track-active-color: null !default;Set this value if additional control is required or the Slider active color.
Color$slider-track-active-opacity: null !default;An optional opacity value to apply to the active Slider color.
Number$slider-track-active-z-index: 2 !default;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.
Number$slider-track-inactive-size: 0.25rem !default;The height/width for the inactive Slider track.
Number$slider-track-inactive-color: null !default;Set this value if additional control is required or the Slider inactive color.
Number$slider-track-inactive-opacity: 0.5 !default;The opacity to apply to the Slider inactive track background color.
Number$slider-track-inactive-z-index: 1 !default;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
Color$slider-track-disabled-color: theme.theme-get-var(text-disabled-color) !default;The background-color to apply to a Slider track while disabled.
Number$slider-mark-height: $track-inactive-size !default;The default height of a discrete Slider tick mark.
Number$slider-mark-width: $track-inactive-size !default;The default width of a discrete Slider tick mark.
Number$slider-mark-border-radius: border-radius.get-var(full) !default;The default border-radius for a discrete Slider tick mark.
Color$slider-mark-light-active-color: theme.theme-get-var(on-primary-color) !default;The light theme Slider tick mark color.
Color$slider-mark-dark-active-color: $mark-light-active-color !default;The dark theme Slider tick mark color.
Number$slider-mark-light-active-opacity: 0.38 !default;The light theme Slider tick mark opacity.
Number$slider-mark-dark-active-opacity: 0.38 !default;The dark theme Slider tick mark opacity.
Color$slider-mark-active-color: theme.get-default-color(
$mark-light-active-color,
$mark-dark-active-color
) !default;The default Slider tick mark color.
Number$slider-mark-active-opacity: theme.get-default-color(
$mark-light-active-opacity,
$mark-dark-active-opacity
) !default;The default Slider tick mark opacity.
Color $slider-mark-light-inactive-color: colors.$black !default;The light theme color for a Slider mark that is not covered by the active
Slider track.
Color $slider-mark-dark-inactive-color: colors.$white !default;The dark theme color for a Slider mark that is not covered by the active
Slider track.
Color $slider-mark-inactive-color: theme.get-default-color(
$mark-light-inactive-color,
$mark-dark-inactive-color
) !default;The default color for a Slider mark that is not covered by the active
Slider track.
Number$slider-mark-light-inactive-opacity: 1 !default;The default opacity to apply to the light theme Slider mark.
Number$slider-mark-dark-inactive-opacity: 0.8 !default;The default opacity to apply to the dark theme Slider mark.
Number$slider-mark-inactive-opacity: theme.get-default-color(
$mark-light-inactive-opacity,
$mark-dark-inactive-opacity
) !default;The default opacity to apply to the Slider mark.
Number$slider-mark-inactive-z-index: 1 !default;The z-index for an inactive Slider mark.
Number$slider-mark-active-z-index: $track-active-z-index + 1 !default;The z-index for an active Slider mark.
Number$slider-thumb-size: 1.25rem !default;The size for the Slider thumb.
Number$slider-thumb-border-radius: border-radius.get-var(full) !default;The border-radius for the Slider thumb.
Number$slider-thumb-bubble-opacity: 0.3 !default;The amount of opacity to apply to the focused/active state of the Slider
thumb.
Number$slider-thumb-z-index: $track-active-z-index !default;The z-index for the Slider thumb.
Number$slider-thumb-focus-scale: 2 !default;The size of the focused state for a Slider thumb.
Number$slider-thumb-active-scale: 2.5 !default;The size of the active state for a Slider thumb.
Number$slider-thumb-disabled-scale: 0.5 !default;The size of a disabled Slider thumb.
Number$slider-thumb-mask-scale: 0.8 !default;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
Color$slider-thumb-disabled-color: $track-disabled-color !default;The disabled color for a Slider thumb.
Number$slider-tooltip-caret-size: 0.3rem !default;The discrete Slider tooltip caret size which is generated using border.
Number$slider-tooltip-offset: calc(-1 * ($thumb-size + icon.$spacing)) !default;The top/left for the discrete Slider tooltip.
Number$slider-tooltip-z-index: 0 !default;The z-index for the discrete Slider tooltip.
Number$slider-container-padding: $thumb-size * 0.5 !default;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.
Number$slider-container-addon-spacing: $thumb-size !default;The amount of spacing between a Slider addon and the SliderTrack.
Number$slider-transition-duration: transition.$linear-duration !default;The transition-duration to apply to the Slider while the next value should animate.
Number$slider-transition-timing-function: transition.$linear-timing-function !default;The transition-timing-function to apply to the Slider while the next value should animate.
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
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin use-light-theme { … }Applies the light the variables based on feature flags
mixin@mixin use-dark-theme { … }Applies the dark the variables based on feature flags
mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |