Slider

A slider allows you to select one or two values within a specified range.

  • Anatomy
  • Element Patterns and Types
  • Element Pattern
  • Thumb
  • Value Label
  • States
  • Value
  • Behavior
  • Changing Values
  • Drag and Flick
  • Click Jump or Tap Jump
  • Usage
  • For Double Range Slider
  • Design Specs
  • Styles

Anatomy

  1. Minimum Value Icon (Optional)
  2. Track
  3. Value Label (Optional)
  4. Maximum Value Icon (Optional)
  5. Minimum Numeric Value (Optional)
  6. Thumb
  7. Fill
  8. Maximum Numeric Value (Optional)

Element Patterns and Types

Element Pattern Basic Side Icons Number
Thumb Single Double  
Value Label True False  
States Enabled Disabled  
Value 0% 50% 100%

Element Pattern

  • Basic: A pattern that does not have numbers or icons at either ends of the track.
  • Side Icons: Icons are provided at the ends of the track.
  • Numeric Value: Numbers are provided at the ends of the track, which indicate the minimum and maximum values.

Thumb

Single or Double may be used depending on the number of thumbs. Single allows you to select one value. Double allows you to select a range of two values.

Value Label

You can select whether to use the value label.

States

Enabled and Disabled states are available. The scales for the thumb and value label will change when hovered over (Hover) or pressed (Pressed).

Value

You can set the minimum, medium, and maximum values for the value label.

Behavior

Changing Values

A single thumb allows you to specify one value, whereas double thumbs allow you to specify a range.

Drag and Flick

To control the thumb, you can click and drag it on a PC and tap and flick it on a mobile device.

Click Jump or Tap Jump

You can click and jump a track on a PC and tap and jump on a mobile device.

Usage

For Double Range Slider

alt

Caution

When a double range slider has identical values, ensure that the thumb and value label are not stacked.

Design Specs

  Value Description
1 Minimum Value Icon Indicates the minimum value with an icon.
2 Fill Displays the selected area.
3 Value Label The height is automatically adjusted according to the text length.
4 Maximum Value Icon Indicates the maximum value with an icon.
5 Minimum Numeric Value Indicates the minimum value with a number.
6 Thumb Displays the values of the selected positions along the track.
7 Track The selection range for users is displayed.
8 Minimum Numeric Value Indicates the maximum value with a number.

Styles

  Element Properties
1 Minimum Value Icon
  • Size: Changeable
    • Default: 24x24
  • Color: Changeable
    • Default: $ldsg-color-black
2 Fill
  • Size
    • Width: Changeable
    • Height: Fixed
  • Color: Changeable
    • Default
      • Enabled: $ldsg-color-brand-primary
      • Disabled: #E4E4E4
3 Value Label
  • 3-1. Value Label Container
  • 3-2. Font
3-1 Value Label Container
  • Size: Fixed
    • Both Width: 6px
    • Both Height: 4px
  • Color: Changeable
    • Default
      • Enabled: $ldsg-color-brand-primary
      • Disabled: #E4E4E4
  • Border Radius: Changeable
    • Default: 5px
  • Border: Optional
3-2 Value Label Font
  • Font: Changeable
    • Default
      • Enabled and Disabled: SF Pro Text Bold 13
      • Hover: SF Pro Text Bold 20
    • Color: #FFFFFF
4 Maximum Value Icon
  • Size: Changeable
    • Default: 24px
  • Color: Changeable
    • Default: $ldsg-color-black
5 Minimum Numeric Value
  • Font: Changeable
    • Default
      • SF
  • Color: Changeable
    • Default: $ldsg-color-black
6 Thumb
  • Size: Fixed
    • Enable and Disabled: 18x18
    • Hover: 24x24
7 Track
  • Size
    • Width: Changeable
    • Height: Fixed
  • Color: Changeable
    • Enabled: #DFDFDF
    • Disabled: #F5F5F5
8 Minimum Numeric Value
  • Font: Changeable
    • Default
      • Typography: SF Pro Text Regular 13
      • Color: #000000
9 Padding
  • Fixed
    • Enable and Disabled: 8px
    • Hover: 10px