[slider] Support track dragging with range sliders

Open
#17,228 17 comments 66 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
38/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, react
Domain
frontend

Research direction

Use the Slider component named in the issue as the starting point. Review how range sliders handle track interaction, then implement an optional mode where dragging the track moves both ends while preserving the interval; the linked demos show the expected behavior.

Written by the indexing model from the issue text.

Description

scope: slider type: new feature
  • I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

It would be nice if there was an option which would enable a draggable track with a range slider. By dragging the track, the both ends of the slider would move simultaneously.

Examples 🌈

This behavior can be seen in this react-input-range demo (bottom-most slider).

Dec-26-2021 18-44-50

https://ourworldindata.org/explorers/coronavirus-data-explorer?zoomToSelection=true&time=2020-07-28..2021-12-25&facet=none&hideControls=true&Metric=Confirmed+cases&Interval=New+per+day&Relative+to+Population=false&Align+outbreaks=false&country=GBR~FRA

Motivation 🔦

I found myself needing this kind of functionality while implementing a time-of-day filter which has a default time interval. With this functionality, an user could move the filter with one click and drag, retaining the interval but could modify it when needed.

Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.