Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Slider

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style slider selector is SLIDER_STYLES.

You can not change the name of the object of tokens.

slider component has one way to modify the styles:

  • Variant: modify the styles of the Slider.

The structure of the SLIDER object is:

Variants and States

Variants can modify the styles for each inner state of the slider. The inner states are:

123456
enum SliderType {
  DEFAULT,
  HOVER,
  PRESSED,
  DISABLED,
}

For each inner state the next tokens can be used:

12345678910
const SLIDER_STYLES = {
  [VARIANT]: {
    [STATE]: {
      labelContainer?: CommonStyleType;
      scaleContainer?: CommonStyleType;
      scaleOption?: CommonStyleType;
      buttonsTracksContainer?: CommonStyleType;
      tracksThumbsContainer?: CommonStyleType;
      tracksThumbsInnerContainer?: CommonStyleType;
      helperTextContainer?: CommonStyleType;

Example

slider theme object example:

12345678910
const SLIDER_STYLES = {
  [VARIANT]: {
    [STATE]: {
      container: {
        width: 'width',
        cursor: 'cursor',
      },
      thumb: {
        position: 'absolute',
        box_sizing: 'box_sizing',
SliderCode API
Text CountUsage