Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Specification
  • Tools
  • Slider

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    slider-bottom-to-handle-extra-large scale-set - desktop: 14px
    mobile: 17px
    Yes - -
    slider-bottom-to-handle-large scale-set - desktop: 11px
    mobile: 14px
    Yes - -
    slider-bottom-to-handle-medium scale-set - desktop: 8px
    mobile: 10px
    Yes - -
    slider-bottom-to-handle-small scale-set - desktop: 5px
    mobile: 6px
    Yes - -
    slider-control-height-extra-large scale-set - desktop: 20px
    mobile: 26px
    Yes - -
    slider-control-height-large scale-set - desktop: 18px
    mobile: 22px
    Yes - -
    slider-control-height-medium scale-set - desktop: 16px
    mobile: 20px
    Yes - -
    slider-control-height-small scale-set - desktop: 14px
    mobile: 18px
    Yes - -
    slider-control-to-field-label-editable-extra-large scale-set - desktop: -20px
    mobile: -24px
    Yes Refactor required; remove padding from label, no negative margins -
    slider-control-to-field-label-editable-large scale-set - desktop: -16px
    mobile: -20px
    Yes Refactor required; remove padding from label, no negative margins -
    slider-control-to-field-label-editable-medium scale-set - desktop: -12px
    mobile: -16px
    Yes Refactor required; remove padding from label, no negative margins -
    slider-control-to-field-label-editable-small scale-set - desktop: -4px
    mobile: -8px
    Yes Refactor required; remove padding from label, no negative margins -
    slider-control-to-field-label-extra-large scale-set - desktop: -20px
    mobile: -28px
    Yes Refactor required; remove padding from label, no negative margins -
    slider-control-to-field-label-large scale-set - desktop: -16px
    mobile: -20px
    Yes Refactor required; remove padding from label, no negative margins -
    slider-control-to-field-label-medium scale-set - desktop: -12px
    mobile: -16px
    Yes Refactor required; remove padding from label, no negative margins -
    slider-control-to-field-label-side-extra-large scale-set - desktop: 24px
    mobile: 28px
    Yes Use semantic token container-gap-extra-large instead. Replaced by container-gap-extra-large
    slider-control-to-field-label-side-large scale-set - desktop: 20px
    mobile: 24px
    Yes Use semantic token container-gap-large instead. Replaced by container-gap-large
    slider-control-to-field-label-side-medium scale-set - desktop: 16px
    mobile: 20px
    Yes Use semantic token container-gap-medium instead. Replaced by container-gap-medium
    slider-control-to-field-label-side-small scale-set - desktop: 16px
    mobile: 20px
    Yes Use semantic token container-gap-small instead. Replaced by container-gap-small
    slider-control-to-field-label-small scale-set - desktop: -4px
    mobile: -8px
    Yes Refactor required; remove padding from label, no negative margins -
    slider-control-to-text-field-extra-large scale-set - desktop: 24px
    mobile: 28px
    Yes Use semantic token container-gap-extra-large instead. Replaced by container-gap-extra-large
    slider-control-to-text-field-large scale-set - desktop: 20px
    mobile: 24px
    Yes Use semantic token container-gap-large instead. Replaced by container-gap-large
    slider-control-to-text-field-medium scale-set - desktop: 16px
    mobile: 20px
    Yes Use semantic token container-gap-medium instead. Replaced by container-gap-medium
    slider-control-to-text-field-small scale-set - desktop: 16px
    mobile: 20px
    Yes Use semantic token container-gap-small instead. Replaced by container-gap-small
    slider-handle-border-width-down-extra-large scale-set - desktop: 8px
    mobile: 11px
    Yes - -
    slider-handle-border-width-down-large scale-set - desktop: 7px
    mobile: 9px
    Yes - -
    slider-handle-border-width-down-medium scale-set - desktop: 6px
    mobile: 8px
    Yes - -
    slider-handle-border-width-down-small scale-set - desktop: 5px
    mobile: 7px
    Yes - -
    slider-handle-extra-large scale-set - desktop: 24px
    mobile: 30px
    No - -
    slider-handle-gap dimension 4px 4px Yes - -
    slider-handle-height-precision-extra-large scale-set - desktop: 26px
    mobile: 32px
    No - -
    slider-handle-height-precision-large scale-set - desktop: 24px
    mobile: 30px
    No - -
    slider-handle-height-precision-medium scale-set - desktop: 22px
    mobile: 26px
    No - -
    slider-handle-height-precision-small scale-set - desktop: 20px
    mobile: 24px
    No - -
    slider-handle-large scale-set - desktop: 22px
    mobile: 28px
    No - -
    slider-handle-medium scale-set - desktop: 20px
    mobile: 24px
    No - -
    slider-handle-precision-width dimension 6px 6px No - -
    slider-handle-size-extra-large scale-set - desktop: 20px
    mobile: 26px
    Yes - -
    slider-handle-size-large scale-set - desktop: 18px
    mobile: 22px
    Yes - -
    slider-handle-size-medium scale-set - desktop: 16px
    mobile: 20px
    Yes - -
    slider-handle-size-small scale-set - desktop: 14px
    mobile: 18px
    Yes - -
    slider-handle-small scale-set - desktop: 18px
    mobile: 22px
    No - -
    slider-track-height-large dimension 16px 16px No - -
    slider-track-height-medium dimension 4px 4px No - -
    slider-track-thickness dimension 2px 2px Yes - -