Material-ui: [Slider] Port component

[nathanmarks]

• [ ] Component
• [ ] Tests (at least unit tests)
• [ ] Docs
• [ ] Demo
• [ ] Make sure the new component doesn't suffer the same issues than the previous version.

[johnyousif]

Can anyone estimate when this component will be available on v1?

[johnyousif]

@oliviertassinari can you let us know if there are any plans for this to be implemented please? The implication here is that there aren't any. If so, can you just confirm because I'll need to implement a different one. It seems only the slider is missing from beta?

[darkowic]

I have the same problem. We decided to use material ui beta and only this component is missing. If you don't start with it until end of next week, then I think I will try to implement it because it will block us :)

[oliviertassinari]

You can use something like rc-slider in the mean time. We will most likely release v1 without this component, it will come later.

[uwap]

@oliviertassinari Why the decision to not put the slider to 1.0?

[oliviertassinari]

@uwap It's a matter of time constraints, first, we focus on the core components. Then, step by step, we increase the supported list of components. I don't think that being in v1.0 or v1.1 is relevant. It's more a matter of when.

[NicolasRannou]

Looking forward to it!

[jedwards1211]

@uwap as the author of semantic-release explains in this video, version numbers are for machine consumption, not for humans.

The first release of the current beta has to have at least version 1.0.0, since it's full of breaking changes. If people insisted on having sliders in the 1.0.0 release, the authors would be unable to release the current beta with a real version number until everything people think belongs in 1.0.0 is done. But if they release what they have now as 1.0.0 and add a slider later, they can just release again with version 1.1.0.

[paulhobbel]

I started working on migrating this component myself a couple days ago, will make a PR soon.

[oliviertassinari]

@ItsDizzy Let us know about your progress :). I would highly encourage you to benchmark the other implementations available out there. For instance, SVGOMG version looks good.

[sghall]

@oliviertassinari you should check out this slider component concept I've been working on. Leaves all the opinionated stuff to the user like styles and markup. Just give it a MUI Rail, Track and Handle components (ticks, too, if you want them). Still a WIP:

https://github.com/sghall/react-compound-slider

Docs in the repo is a MUI beta app (your old docs app) if you want to give it a whirl.

[eigood]

I wrote a slider starting last Friday. It's mostly done, but not yet public yet. Has the following features:

• Multiple handles, handle can be readOnly(styled as disabled).
• Clicking on the track finds the closest handle and moves it.
• Hover support on the track, with a pointer
• Can have a div placed above or below the track, that follows the hover pointer. I use this for thumbnail display in a video player.
• Multiple bar support; used to show read-ahead in a player.
• Ticks.
• Hover support works on iPhone 6, but not native S5. In those cases, it just acts like you've grabbed a handle.
• Uses JSS; the only inline styles are the position parts.
• Animations on track width, hover thumbnail, handle activation.
• Can drop into mui 0.20 or 1.0. In the former, will base it's values off theme.slider. In the latter, it reads from theme.spacing and theme.palette.
• Keyboard handling could be made pluggable, without too much effort.

I'm a bit busy, trying to finish up the port of my client site from 0.20 to 1.0, so can't release this just yet. But the plan is to do so within the week.

[mbrookes]

@eigood Look forward to seeing it. Since it sounds like your primary use-case is video, are you using the progress bar for the track? This provides the buffering animation and read-ahead bar:

https://material-ui-next.com/demos/progress/#linear-buffer

[eigood]

I use this slider for the video scrubber, for volume control, and for selecting which of 48 pregenerated thumbnails. The slider is fully designed to be used outside of video; the SS was from the test page I had.

What is holding me up, is that I haven't released stuff in the node ecosystem before, and nothing in the es6 era, so I don't yet know the community standard way of doing a standalone project. For instance, I really don't like having to pre-build a library for use by downstreams, I'd rather just assume my users would have a proper compiler.

[jzr1991]

@eigood - Any update on the slider? I'm using material-ui-next but using material-ui-slider-label gives me an error because it's looking for muiTheme in this.context and for whatever reason I get the error - I'm assuming it's something to do with differences between material-ui and material-ui-next.

[mbrookes]

@eigood You should definitely be transpiling your ES6 source for the release version, although some libraries include the es6 source in the released package. You could take a look at packages/lab for inspiration, although that's slightly complicated by the fact that we're sharing dev dependencies with the parent.

[ifier]

Any updates about migrating Slider to the "Next" version? We really like to use Material for all controls and waiting Slider as well :)

[p2k]

@eigood this is the guide/example that I've been following in my ES6 libraries: https://github.com/kriasoft/babel-starter-kit
It might help you too.

[NicolasRannou]

Any update on this one? :)

[abdallahokasha]

Here's a solution for making form of multiple sliders or even one single slider with event handler passed
we can simply use HTML input of type Range
rc-slider and react-input-range don't sent event handler onChange or onAfterChange they sends the slider's value Implicitly, so we can't handle form of sliders or create them on the fly.

jsfiddle snippet

For more we can check HTML input Range and CSS provided by CSS-Tricks

This solution working perfectly with me ;)

Using codeSandbox

[knro]

Is there any ETA on this component?

[oliviertassinari]

No. But you can start using it under the lab package. You can expect breaking changes until it's moved to the core.

[forthrightstl]

Any update on this component?

[rolandjitsu]

@forthrightstl see Slider. You can already use it from @material-ui/lab.

[joseph-allen]

are there plans to support multiple values?

[mbrookes]

@joseph-allen Not currently.

[CameronAckermanSEL]

For those of you hunting for a good slider to use (permanently or in the mean time) we found this library to be really wonderful and easy to work with. https://github.com/sghall/react-compound-slider