Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/slider #1016

merged 39 commits into from Dec 15, 2020

Feature/slider #1016

merged 39 commits into from Dec 15, 2020


Copy link

@mlaursen mlaursen commented Nov 24, 2020


This PR adds the Slider component back from v1 with a few changes and support for range sliders. The @react-md/form package will now support sliders by:

  • Slider + useSlider hook
  • RangeSlider + useRangeSlider hook

Disclaimer: it is only split up this way since I couldn't figure out how to type this correctly... Could simplify to just a Slider + useSlider hook once that can be figured out.

Both the useSlider and useRangeSlider return the current value followed by an object of control props that should be provided to the respective component. The default behavior is that the value (first item in returned list) will be updated on change. Meaning:

  • the value updates each time the user drags the slider via mouse, touch, or keyboard

Since this might be unideal, both hooks support updateOn and onChange where setting updateOn: "blur" will make sure the value only updates when the slider thumb is blurred or when the user has stopped dragging via mouse/touch. The onChange is really just a simple way to store the value in other places (like redux if needed) and probably won't be used much.

Changes Between v1 behavior

The styles have changed a bit to match the updated specs from the Material Design website. I recommend checking out the preview section to see what the new components look like.

Here's a list of the most notable behavior changes:

  • Sliders will no longer close modals if the user stops dragging the slider while the mouse is over the overlay
  • Better keyboard behavior support with ArrowLeft, ArrowRight, ArrowUp, ArrowDown, Home, End, PageUp, and PageDown
  • The new hooks support updating the value on blur instead of change with a new onChange callback if you don't care about the current value until the user stops interacting with the slider
  • The discrete slider now renders the value within a tooltip
  • Supports RTL layouts
  • Supports vertical sliders


Simple Sliders

Simple Sliders

Simple Sliders

Range Sliders

Range Sliders

Discrete Sliders



Color Picker Slider (with text field)

lColor Picker Slider with text field

Closes #246, Closes #569, Closes #571, Closes #865, Closes #845, Closes #846

@mlaursen mlaursen changed the title Feature/slider WIP Feature/slider Nov 24, 2020
Copy link

codecov-io commented Nov 25, 2020

Codecov Report

Merging #1016 (f8ce705) into main (a41d578) will increase coverage by 0.83%.
The diff coverage is 98.83%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #1016      +/-   ##
+ Coverage   89.29%   90.13%   +0.83%     
  Files         259      272      +13     
  Lines        7316     7994     +678     
  Branches     1887     2056     +169     
+ Hits         6533     7205     +672     
  Misses        699      699              
- Partials       84       90       +6     
Impacted Files Coverage Δ
packages/utils/src/layout/GridCell.tsx 83.67% <ø> (ø)
packages/form/src/slider/SliderValue.tsx 90.00% <90.00%> (ø)
packages/form/src/slider/utils.ts 96.72% <96.72%> (ø)
...ages/form/src/slider/useDiscreteValueVisibility.ts 98.11% <98.11%> (ø)
packages/form/src/slider/Slider.tsx 98.41% <98.41%> (ø)
packages/form/src/slider/RangeSlider.tsx 98.50% <98.50%> (ø)
packages/form/src/slider/useRangeSlider.ts 98.66% <98.66%> (ø)
packages/form/src/label/Label.tsx 100.00% <100.00%> (ø)
packages/form/src/slider/SliderContainer.tsx 100.00% <100.00%> (ø)
packages/form/src/slider/SliderThumb.tsx 100.00% <100.00%> (ø)
... and 20 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a41d578...f8ce705. Read the comment docs.

@mlaursen mlaursen force-pushed the feature/slider branch 2 times, most recently from 1d96efd to f8ce705 Compare December 15, 2020 22:05
This should still probably only be used internally though
This allows for the class names to be swapped when using a column-reverse or row-reverse
flex-direction container.
@mlaursen mlaursen changed the title WIP Feature/slider Feature/slider Dec 15, 2020
@mlaursen mlaursen merged commit f8ce705 into main Dec 15, 2020
@mlaursen mlaursen deleted the feature/slider branch December 15, 2020 23:26
@mlaursen mlaursen added this to the 2.5.0 milestone Dec 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment