Create component Slider

Form > Slider

Requirement

As a developer
I want to insert a carousel
So That I will get this ready to use component compatible with Orange design specifications and a11y requirements

DSM reference

General description

Sliders allow users to select a single value or a range of values by moving a handle along a horizontal track.

UI specifications

Anatomy

1. Slider label (Mandatory): the name of the unit manipulating in the slider is on the left
2. Handle (Hamdatory):
3. Value (Optional): on the right on top of the slider
4. Active fill (Mandatory)
5. Track (Mandatory)
6. ??? Segments (Optional): tickmarks to show a graduation on the bar
7. ??? Tooltip (Optional): show temporary values on the bar when you hover on the bar

Variants

Basic slider

Basic sliders allow users to make selections that don’t require a specific value, for example, the volume slider used for music where it is not necessary to choose a specific value.

Single value slider

Single value sliders allow users to select a single value from a range.

Dual range slider

Dual range sliders are used for setting a minimum and maximum value from a range.

??? Slider with tooltips

A tooltip to show the value when you move the handle.
A tooltip to show the hover of the user on the bar to see the corresponding value

??? Slider with persistent tickmarks

On the slider tickmarks show a graduation on the slide bar

States

CSliders can have four possible states:

• Default
• Hover
• Pressed / dragged
• Visible focus
• Disabled

Internationalisation

For right-to-left languages, like Arabic, the value position should be reversed, placing the largest value on the left, and the smallest on the right.

Appearance

Placement

UX specifications

Interaction

• All:

  • The value is the number selected within the slider
  • The value ranges from the minimum value to the maximum value set by the dev
  • The dev will set a step value to allow the range in between possible values

• Mouse:

  • Dragging the handle across the track changes the value on the slider.
  • It is also possible to click anywhere on the bar and the handle will slide automatically to that value.
  • In a Dual range slider if the user clicks on the bar the handle closest to the click will be moved

• Keyboard:

  • The left and right arrows and top down arrows will allow to move the slider
  • In the Dual range the tab key is used to change from one handle to the other
  • The user will not be able to type in direct values to set

• Touch (mobile): same as the mouse interaction

Animations

No animation for this component

Accessibility

Visual Accessibility

xxx

Usage Accessibility

• The label of the slider is used to describe the "alt" text
• The keybaord interaction needs to be available
• the focus element need to allow the use of the handle/s
• when there is 2 handles, the label should mention the disctinction between "mininmum" & "maximum" values

Technical specifications

• The slider is always used horizontally
• A slider could show negative values
• A slide step should be able to be defined as a integer or float
• A slider should allow the dev to set the unit of the data displayed - the unit would show next to the value - the unit could be placed before or after the value (ie: $50 - 30€) on range slider the value should show "20€ to 60€"
• slider customizable options are the label - range - unit - steps
• Dual Sliders
  • Multiple-range slider has max 2 handles - Dual Range
  • the handle on the left always remain on the left - a slider handle should slide past the other one (at least as a target)
  • the handles should not be able to go on top of each other (part of the issue is linked to a design setup in the steps to use in the corresponding slider)

Updates from the prototype investigations:

• Options possible variants for single slider
  • one with no graduation at all and the value on the top right corner
  • one with graduation only min and max will show the value of the handle in a tooltip
  • one with all graduations will show the value of the handle in a tooltip
• Options possible variants for the double slider
  • one with no graduation exept min and max
  • one with all the graduation under the slider (does not exist with graduation over the slider)
• when a double slider is displayed with graduation, the graduations will always show with the intermediate smaller graduations (they cannot be taken away)
• in a double slider all values of a handles are using a tooltip to show the handle value
• when a double slider is not showing the graduation, the max and min values should always show
• all sliders should always have a label (heading, aria-label, aria-labelledby) even if it is hidden for user but available for accessibility purposes
• all sliders should provide the min and max values for accessibility even if not displayed

Some resources

• WAI example
• OOA example
• Directly on Boostrap? https://github.com/twbs/bootstrap/issues/32215
• Good example with a11y: https://dequeuniversity.com/library/aria/slider-multirange

HTML Structure

xxx

JavaScript

xxx

Documentation in Boosted

xxx

Implementation tasks

• #1138
• Slider multi-range (don't forget to implement it on e-shop page if merged before)

Related tasks

• #1329 (white tooltips and popovers)
• #1714

No file or test entry point is named. Start with the slider requirements, prototype updates, and the checked #1138 task, then scope the unchecked multi-range work and its e-shop requirement; done means the specified slider variants, keyboard and touch interactions, RTL behavior, accessibility labeling, values, units, and documentation are implemented.