Orange-OpenSource / Orange-Boosted-Bootstrap

Orange Boosted is an accessible, ergonomic and Orange branded framework based on Bootstrap
https://boosted.orange.com/
MIT License
193 stars 56 forks source link

Forms > Sliders #116

Open PigeardSylvain opened 5 years ago

PigeardSylvain commented 5 years ago

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:

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

Animations

No animation for this component

Accessibility

Visual Accessibility

xxx

Usage Accessibility

Technical specifications

Updates from the prototype investigations:

Some resources

HTML Structure

xxx

JavaScript

xxx

Documentation in Boosted

xxx

Implementation tasks

Related tasks

ffoodd commented 5 years ago

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

ffoodd commented 3 years ago

Maybe try something on Bootstrap? See Bootstrap #32215.

julien-deramond commented 2 years ago

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

MewenLeHo commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

MewenLeHo commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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):

MewenLeHo commented 2 years ago

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

MewenLeHo commented 2 years ago

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 commented 1 year ago

Prototypes created by @MewenLeHo for the slider dual range:

julien-deramond commented 1 year ago

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