Slider Sass API

Variables

slider-disable-everything

$slider-disable-everything: base.$form-disable-everything !default;

slider-disable-horizontal

$slider-disable-horizontal: $disable-everything !default;

slider-disable-vertical

$slider-disable-vertical: $disable-everything !default;

slider-disable-range

$slider-disable-range: $disable-everything !default;

Used By

• @mixin slider-styles

slider-disable-discrete

$slider-disable-discrete: $disable-everything !default;

Used By

• @mixin slider-variables
• @mixin slider-styles

slider-disable-discrete-marks

$slider-disable-discrete-marks: $disable-discrete !default;

Used By

• @mixin slider-use-light-theme
• @mixin slider-use-dark-theme
• @mixin slider-variables
• @mixin slider-styles

slider-disable-discrete-marks-labels

$slider-disable-discrete-marks-labels: $disable-discrete-marks !default;

Used By

• @mixin slider-styles

slider-size

$slider-size: 2rem !default;

slider-vertical-size

$slider-vertical-size: 15rem !default;

Used By

• @mixin slider-variables

slider-track-color

$slider-track-color: theme.theme-get-var(primary-color) !default;

See Also

• $slider-track-active-color
• $slider-track-active-opacity
• $slider-track-inactive-color
• $slider-track-inactive-opacity

Used By

• @mixin slider-variables
• @mixin slider-styles

slider-track-active-size

$slider-track-active-size: 0.375rem !default;

See Also

• $avatar-size

Used By

• @mixin slider-variables

slider-track-active-color

$slider-track-active-color: null !default;

See Also

• $slider-track-color

Used By

• @mixin slider-variables

slider-track-active-opacity

$slider-track-active-opacity: null !default;

See Also

• $slider-track-color

Used By

• @mixin slider-styles

slider-track-active-z-index

$slider-track-active-z-index: 2 !default;

See Also

• $slider-track-inactive-z-index

Used By

• @mixin slider-styles

slider-track-inactive-size

$slider-track-inactive-size: 0.25rem !default;

Used By

• @mixin slider-variables

slider-track-inactive-color

$slider-track-inactive-color: null !default;

See Also

• $slider-track-color

Used By

• @mixin slider-variables

slider-track-inactive-opacity

$slider-track-inactive-opacity: 0.5 !default;

See Also

• $slider-track-color

Used By

• @mixin slider-styles

slider-track-inactive-z-index

$slider-track-inactive-z-index: 1 !default;

See Also

• $slider-track-active-z-index

Used By

• @mixin slider-styles

slider-track-disabled-color

$slider-track-disabled-color: theme.theme-get-var(text-disabled-color) !default;

Used By

• @mixin slider-styles

slider-mark-height

$slider-mark-height: $track-inactive-size !default;

Used By

• @mixin slider-styles

slider-mark-width

$slider-mark-width: $track-inactive-size !default;

Used By

• @mixin slider-styles

slider-mark-border-radius

$slider-mark-border-radius: border-radius.get-var(full) !default;

Used By

• @mixin slider-styles

slider-mark-light-active-color

$slider-mark-light-active-color: theme.theme-get-var(on-primary-color) !default;

Used By

• @mixin slider-use-light-theme
• @mixin slider-use-dark-theme

slider-mark-dark-active-color

$slider-mark-dark-active-color: $mark-light-active-color !default;

Used By

• @mixin slider-use-light-theme
• @mixin slider-use-dark-theme

slider-mark-light-active-opacity

$slider-mark-light-active-opacity: 0.38 !default;

slider-mark-dark-active-opacity

$slider-mark-dark-active-opacity: 0.38 !default;

slider-mark-active-color

$slider-mark-active-color: theme.get-default-color(
  $mark-light-active-color,
  $mark-dark-active-color
) !default;

Used By

• @mixin slider-variables

slider-mark-active-opacity

$slider-mark-active-opacity: theme.get-default-color(
  $mark-light-active-opacity,
  $mark-dark-active-opacity
) !default;

Used By

• @mixin slider-variables

slider-mark-light-inactive-color

$slider-mark-light-inactive-color: colors.$black !default;

Used By

• @mixin slider-use-light-theme
• @mixin slider-use-dark-theme

slider-mark-dark-inactive-color

$slider-mark-dark-inactive-color: colors.$white !default;

Used By

• @mixin slider-use-light-theme
• @mixin slider-use-dark-theme

slider-mark-inactive-color

$slider-mark-inactive-color: theme.get-default-color(
  $mark-light-inactive-color,
  $mark-dark-inactive-color
) !default;

Used By

• @mixin slider-variables

slider-mark-light-inactive-opacity

$slider-mark-light-inactive-opacity: 1 !default;

Used By

• @mixin slider-use-light-theme
• @mixin slider-use-dark-theme

slider-mark-dark-inactive-opacity

$slider-mark-dark-inactive-opacity: 0.8 !default;

Used By

• @mixin slider-use-light-theme
• @mixin slider-use-dark-theme

slider-mark-inactive-opacity

$slider-mark-inactive-opacity: theme.get-default-color(
  $mark-light-inactive-opacity,
  $mark-dark-inactive-opacity
) !default;

Used By

• @mixin slider-variables

slider-mark-inactive-z-index

$slider-mark-inactive-z-index: 1 !default;

Used By

• @mixin slider-styles

slider-mark-active-z-index

$slider-mark-active-z-index: $track-active-z-index + 1 !default;

Used By

• @mixin slider-styles

slider-thumb-size

$slider-thumb-size: 1.25rem !default;

Used By

• @mixin slider-styles

slider-thumb-border-radius

$slider-thumb-border-radius: border-radius.get-var(full) !default;

Used By

• @mixin slider-styles

slider-thumb-bubble-opacity

$slider-thumb-bubble-opacity: 0.3 !default;

See Also

• $slider-thumb-focus-scale
• $slider-thumb-active-scale

Used By

• @mixin slider-styles

slider-thumb-z-index

$slider-thumb-z-index: $track-active-z-index !default;

Used By

• @mixin slider-styles

slider-thumb-focus-scale

$slider-thumb-focus-scale: 2 !default;

See Also

• $slider-thumb-bubble-opacity

Used By

• @mixin slider-styles

slider-thumb-active-scale

$slider-thumb-active-scale: 2.5 !default;

See Also

• $slider-thumb-bubble-opacity

Used By

• @mixin slider-styles

slider-thumb-disabled-scale

$slider-thumb-disabled-scale: 0.5 !default;

See Also

• $slider-thumb-mask-scale

Used By

• @mixin slider-styles

slider-thumb-mask-scale

$slider-thumb-mask-scale: 0.8 !default;

See Also

• $slider-thumb-disabled-scale

Used By

• @mixin slider-styles

slider-thumb-disabled-color

$slider-thumb-disabled-color: $track-disabled-color !default;

Used By

• @mixin slider-styles

slider-tooltip-caret-size

$slider-tooltip-caret-size: 0.3rem !default;

Used By

• @mixin slider-styles

slider-tooltip-offset

$slider-tooltip-offset: calc(-1 * ($thumb-size + icon.$spacing)) !default;

Used By

• @mixin slider-styles

slider-tooltip-z-index

$slider-tooltip-z-index: 0 !default;

Used By

• @mixin slider-styles

slider-container-padding

$slider-container-padding: $thumb-size * 0.5 !default;

Used By

• @mixin slider-styles

slider-container-addon-spacing

$slider-container-addon-spacing: $thumb-size !default;

Used By

• @mixin slider-styles

slider-transition-duration

$slider-transition-duration: transition.$linear-duration !default;

slider-transition-timing-function

$slider-transition-timing-function: transition.$linear-timing-function !default;

slider-variables

$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
);

Mixins

slider-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

slider-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

slider-use-light-theme

@mixin use-light-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $slider-disable-discrete-marks
• $slider-mark-light-active-color
• $slider-mark-dark-active-color
• $slider-mark-light-inactive-color
• $slider-mark-dark-inactive-color
• $slider-mark-light-inactive-opacity
• $slider-mark-dark-inactive-opacity

slider-use-dark-theme

@mixin use-dark-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $slider-disable-discrete-marks
• $slider-mark-dark-active-color
• $slider-mark-light-active-color
• $slider-mark-dark-inactive-color
• $slider-mark-light-inactive-color
• $slider-mark-dark-inactive-opacity
• $slider-mark-light-inactive-opacity

slider-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• @function is-theme-color-var
• $app-bar-disable-everything
• $slider-track-color
• $slider-track-active-color
• $slider-track-inactive-color
• $avatar-size
• $slider-track-active-size
• $slider-track-inactive-size
• $slider-disable-discrete
• $slider-disable-discrete-marks
• $slider-mark-active-color
• $slider-mark-active-opacity
• $slider-mark-inactive-color
• $slider-mark-inactive-opacity
• $divider-disable-vertical
• $slider-vertical-size

slider-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function theme-color-var-fallback
• @function app-bar-get-var
• $app-bar-disable-everything
• $slider-container-addon-spacing
• $divider-spacing
• $draggable-disable-horizontal
• $slider-container-padding
• $divider-disable-vertical
• $slider-track-color
• $slider-track-inactive-opacity
• $slider-track-inactive-z-index
• $slider-track-active-opacity
• $slider-track-active-z-index
• $link-transition-duration
• $overlay-transition-timing-function
• $slider-track-disabled-color
• $slider-disable-range
• $slider-thumb-border-radius
• $slider-thumb-size
• $slider-thumb-z-index
• $dialog-z-index
• $slider-thumb-bubble-opacity
• $disable-focus-visible
• $slider-thumb-focus-scale
• $slider-thumb-active-scale
• $slider-thumb-disabled-color
• $slider-thumb-disabled-scale
• $slider-thumb-mask-scale
• $slider-disable-discrete
• $slider-tooltip-z-index
• $slider-tooltip-caret-size
• $slider-tooltip-offset
• $slider-disable-discrete-marks
• $slider-mark-border-radius
• $slider-mark-inactive-z-index
• $slider-mark-active-z-index
• $slider-mark-height
• $slider-mark-width
• $slider-disable-discrete-marks-labels

Functions

slider-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

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:

• The Slider "thumb",
• The active slider track
• The inactive slider track (with opacity applied)

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