Components Library: Slider

[vlatawiec]

🎯 Usage

• Sliders are UI elements that allow users to select either a single value from a set range or a range of values from a set range. This includes a single thumb slider and a dual thumb slider. Our primary use case for slider components is within Widget Studio, and similar platforms, that allow users to choose ranges or values to customize data visualizations. However, slider components can be used numerous cases.

🎭 Types

• Single Thumb Slider: The single thumb slider allows a user to select a single value from a set range. Both a horizontal and vertical single thumb slider have been designed, which are functionally the same but have different designs and use cases.

• Single Thumb Slider Modules: This module contains a single thumb slider component, as well as a value input (for the slider thumb selection), a title (explaining slider purpose in the interface), and with optional slider track limit labels. If a user moves the slider thumb along the track, the input value will change accordingly, and conversely, the slider thumb moves along the track accordingly when a user inputs a different value.

• Dual Thumb Range Slider: The dual thumb slider allows a user to select a specified range, from a larger set range. Both a horizontal and vertical dual thumb slider have been designed, which are functionally the same but have different designs and use cases.

• Dual Thumb Range Slider Modules: This module contains a dual thumb range slider component, as well as a value input for both the min. and max. thumbs, a title (explaining slider purpose in the interface), and with optional slider track limit labels. If a user moves the leftmost (min.) slider thumb along the track, the leftmost (min.) input value will change accordingly and the functionality is the same for the rightmost (max.) thumb and input. When a user changes an input, the associated thumb will move accordingly.

• Stepper Slider: Both horizontal and vertical versions of the single and dual thumb sliders can also be formatted as steppers. This means that user inputs are fixed to specific values, or “steps”, facilitating exact value inputs, but decreasing input variation. When a user moves and "places" the stepper slider thumb, the thumb will "snap" to the closest step.

🫀 Anatomy

Spacing, Sizing & Alignment:

• Thumb sizes remain constant, while track sizes (both active and inactive) can either shrink or grow, based on user inputs. The total track size can be adjusted to fit different use cases, as long as the thumb, title and value input components remain the same size when used.

• Horizontal Thumb: Default; 16x16px; Selected; 18x18px with 32x32px tooltip

• Vertical Thumb: Default; 16x8px; Selected; 18x8px with 32x32px tooltip

• Single & Dual Thumb Slider - Horizontal: height: 16px;

• Single & Dual Thumb Slider - Vertical: height: 112px; width: 16px;

• Due to issues with slider accessibility, as well as the potential need for users to input exact values, sliders should by default, be used in a module structure, with accessory components that increase accessibility, legibility and comprehension.

⌨️ Keyboard Accessibility

Keyboard shortcuts for selected/focused slider thumb movement

• Right Arrow Key: Increase the value of the slider by one step.
• Up Arrow Key: Increase the value of the slider by one step.
• Left Arrow Key: Decrease the value of the slider by one step.
• Down Arrow Key: Decrease the value of the slider by one step.
• Home Key: Set the slider to the first allowed value in its range.
• End Key: Set the slider to the last allowed value in its range.

🔗 Zeplin Link

• COMPONENT_SLIDER

🔢 Attributes

Property	Type	Default Value	Description
disabled	Boolean	'false'	Disables the slider
range	Boolean	'false'	Determines whether the slider has a single value, or a range selection (single [false] or dual [true] thumb).
stepper	Boolean	'false'	Determines whether the slider is formatted as a stepper or as default.
vertical	Boolean	'false'	Determines whether the slider is horizontal or vertical.
max	Number	'-'	The maximum value that a slider can have
min	Number	'-'	The minimum value that a slider can have
step	Number	'-'	The values at which the stepper thumb will snap to
sliderLabel	Boolean	'true'	Determines whether slider limit labels are shown or not.
stepInterval	Number	'-'	How often to show steps. (Step interval of 4, with a step of 3 will create a step every 12 values.
value	Number	'-'	Value of the slider thumb
valueText	Number	'-'	Display text (within the input box) of the slider's value.
defaultValue	String | Number	'0'	The default value that a slider is displayed at
percent	Number	'-'	The percentage of the slider track that coincides with the thumb value

🔍 Design Preview

[woozyking]

what is the significance of the round sliding ~control~ thumb (for horizontal) and the ~rectangle one (for vertical)? why the different shape?

[vlatawiec]

what is the significance of the round sliding ~control~ thumb (for horizontal) and the ~rectangle one (for vertical)? why the different shape?

The smaller vertical slider allows for a higher stepper count, making it a better choice for use cases that require a high range of specified values. Otherwise, the difference is mainly just aesthetic, to create some contrast between the two! Realistically, the horizontal thumb could be used for both, the rectangular thumb just emphasizes the difference

[woozyking]

makes sense

in the case of mostly aesthetics, should we allow this to be configurable? such that, in imaginary usage scenario, for example:

<Slider
  orientation='horizontal'
  thumb='rectangle'
  ...
/>

which would then render, by user's choice, as a horizontal slider with a rectangle thumb (but obviously situated perpendicularly with the sliding bar itself)

but if the stepper is applied, then the thumb property can be inferred accordingly, something like:

<Slider
  with [...specific range of values]
  // thumb inferred to be rectangle, or round if not specific range of values
  // and the verticle slider by default implies stepper use-case
/>

[vlatawiec]

makes sense

in the case of mostly aesthetics, should we allow this to be configurable? such that, in imaginary usage scenario, for example:

<Slider
  orientation='horizontal'
  thumb='rectangle'
  ...
/>

which would then render, by user's choice, as a horizontal slider with a rectangle thumb (but obviously situated perpendicularly with the sliding bar itself)

but if the stepper is applied, then the thumb property can be inferred accordingly, something like:

<Slider
  with [...specific range of values]
  // thumb inferred to be rectangle, or round if not specific range of values
  // and the verticle slider by default implies stepper use-case
/>

That could definitely be something added in the future! Since that will require the design of a configuration/setting section (to allow users to switch slider thumb design), it would be best to implement that fully in a future iteration, based on user need/want. But thats a good idea for lumen-labs as a design system to allow for that customization.