cengage
New component: Slider
Purpose: Build Slider component with some basic standard options, and add enhancements/variations/additional options in later tickets
Figma https://www.figma.com/file/VoWYiiOKKppcYm5QLgPyDC/Components---Inputs?type=design&node-id=1222%3A7119&mode=design&t=72YVX8Uf7ezSO2k9-1
Inspiration:
- https://mantine.dev/core/slider/
- https://mui.com/material-ui/react-slider/
- https://carbondesignsystem.com/components/slider/usage/
AC's
1.0 The width of the range slider is 100% of the container it's within 2.0 The track of the slider uses the medium height progress bar as the base (8px)
3.0 Verify you can set a default value 4.0 Verify you can drag the slider left and right along the track 6.0 Verify the track fills in with a solid color as you move the handle from left to right. 7.0 Verify you can tab to the slider, and move the handle with the arrow keys on the keyboard -- 7.1 ArrowRight/ArrowUp = Increases slider value by one step -- 7.2 ArrowLeft/ArrowDown = Decreases slider value by one step 8.0 Verify the handle receives focus -- 8.1 Verify the actual clickable area of the handle is 42px by 42px. This is for accessibility and makes it easier for users to grab the handle.
9.0 Verify you can set the min, max, and step properties -- 9.2 Verify these can be decimals 10.0 Verify you can add marks and labels to the track. Possibly similar to how Chakra does it: https://mantine.dev/core/slider/ -- 10.1 Verify those labels only display below the track. -- 10.2 Verify those labels can support any format so you can do things like: 78%, $112, etc.
11.0 Verify there is an optional label that is on by default
12.0 Verify a tooltip is used to display the current value above the handle. By default it only displays while you're moving the handle.
-- 12.1 Verify you can make the tooltip always on
13.0 VARIANT: Paired with number/text input -- 13.1 We need an easy way to enable the progress bar to be paired with a number/text input on the right side. -- 13.2 Verify moving the slider handle changes the value in the input, and changing the value in the input changes the slider. --- 13.2.1 Verify you can change the value in the input either by typing the new value or pressing the up and down keys on the keyboard. --- 13.2.2 Verify the value in the input can also have a format identifier like $, %, etc.
14.0 Variant: We need a version of the slider that allows you to define a range -- 14.1 We need something like this "Minimum Distance" function to prevent the handles from overlapping: https://mui.com/material-ui/react-slider/#minimum-distance
15.0 Verify you can disable the slider
16.0 Verify there is an inverse version of the slider available for dark backgrounds. More examples can be found in the Figma file.
