Forms > Sliders

[PigeardSylvain]

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

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

Related tasks

• [x] #1329 (white tooltips and popovers)
• [x] #1714

[ffoodd]

Here are some resources given in #104 by @liyokuna:

• WAI example
• OAA example

[ffoodd]

Maybe try something on Bootstrap? See Bootstrap #32215.

[julien-deramond]

Good example with a11y: https://dequeuniversity.com/library/aria/slider-multirange

[MewenLeHo]

I am currently working on a prototype based on https://dequeuniversity.com/library/aria/slider-multirange with an Orange theme.

You can see the result in CodePen: https://codepen.io/MewenLeHo/pen/RwjOoqB

Do not hesitate to contact me for more informations.

[MewenLeHo]

Please note that the slider described at https://dequeuniversity.com/library/aria/slider-multirange need a min.js file: https://dequeuniversity.com/assets/js/patterns/deque-patterns.min.js that could lead to licence problems.

[Aniort]

Hello, i have evaluted the a11y of the slider https://codepen.io/MewenLeHo/pen/RwjOoqB what's nice:

• Deque is a well-known and skillful a11y corp. so we can rely on their implementation
• aria and HTML are ok
• keyboard nav is ok
• this example seem to and" MUST respect the official design pattern ARIA https://w3c.github.io/aria-practices/#slidertwothumb what's not nice:
• I don't know why an aria-label is generated when we use one of the handlers (to change its value) via JS, don't seem to be useful, but I need more time to check

[MewenLeHo]

After investigation, this prototype seems to do almost what we want. It's easy to customize in CSS and it has a pretty good accessibility level.

The only problem is that the JS is really large and difficult to understand. I tried to remove unnecessary parts (i.e. parts needed for other components) but I am still working on it.

[MewenLeHo]

We also have a licence problem with the component, according to @Lausselloic the slider by Deque is published under private licence so we don't ahave the right to use it.

[louismaximepiton]

Here is a link that could maybe help us ?

Here is the result : https://codepen.io/vsync/pen/mdEJMLv

And its License : https://github.com/yairEO/color-picker/blob/master/LICENSE. It says allowing modification and distribution are OK, but maybe to track a bit more ?

[MewenLeHo]

Before building a new prototype, I think that we need to clarify some points.

Basically the future form component wil be a range (https://boosted.orange.com/docs/5.1/forms/range/ with multiple thumbs.

Unordered questions (do not hesitate to add your own questions):

• How many handles will be allowed? Just two or 'simply' more than one?
• Horizontal and/or vertical?
• What about RTL?
• Negative values allowed?
• Percentage allowed?
• Non numeric 'values' allowed?
• Need to add a step attribute?
• What will be the customizable options?
• Options passed via custom data-* attributes?
• Tooltip?

[MewenLeHo]

A possible start: https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/

[MewenLeHo]

Here is a link that could maybe help us ?

Here is the result : https://codepen.io/vsync/pen/mdEJMLv

And its License : https://github.com/yairEO/color-picker/blob/master/LICENSE. It says allowing modification and distribution are OK, but maybe to track a bit more ?

This example is using Knobs so I don't think that we can use it althought some ideas are really interesting.

[julien-deramond]

Prototypes created by @MewenLeHo for the slider dual range:

• https://codepen.io/MewenLeHo/pen/gOvEWEK?editors=1010
• https://codepen.io/MewenLeHo/pen/LYQweBe?editors=0010
  • Bugs: Cursors position after Boosted was added
  • TODO: outputs position (waiting for designer review)
  • TODO: active values background (waiting for a11y review)

[julien-deramond]

A resource that might be worth looking at: https://codepen.io/simeydotme/pen/WNLxxvx + https://github.com/simeydotme/svelte-range-slider-pips