Bartosz Prusinowski

Creating reusable components and techniques.

Utilities

I ran some automated tests. Ideally, the slider would also support mutating its value and the raised events had bubbles:true set for compatability with native components

Tom Larkworthy

Hi Tom, thank you for running the tests! It took me a while to come back to this notebook (😂), but I added bubbles: true for the "input" event emitted by the div element. When it comes to mutating the value of the slider, this is currently possible by using the update method exposed by the div.

It would be really cool to have a slider whose bar starts in the middle. I need a slider to control rotation: left=counterclockwise, middle=stop, right=clockwise. You could generalize this to have the colored bar start anywhere, not just the dead center.

Hi Lao, this kind of appearance is somehow already possible with the help of the *highlight* property, as in the Highlighted Slider. I guess the API could be easier to just start the bar anywhere, I will consider introducing changes related to that.

Can we access the `min`, `max` or `step` of the slider from the outside?

lochiwei

Hi lochiwei, I implemented the ability to access the min, max and step attributes and described this in the API reference. Thanks for your suggestion!

Besides using the `theme`, can we customize the slider's thumb with custom CSS?

Yes, not directly in the slider function, but you could modify its appearance by writing some custom CSS targeting the thumb e.g. .input-default input[type = 'range']::-webkit-slider-thumb (if you use the default theme).

Might call it a YOCO button, you only click once.

T.E. Schouten

Cool idea, thanks for commenting! I have modified the example 😊