So I’m attempting to make a speed slider for a small toy project. Instead of having a range slider with a max/min and regular increments I’d like to be able to define custom options.
I have a small example hosted on Ellie https://ellie-app.com/LSsv7JqYGTa1
I’ve tried to create a slider with 3 options 1000, 500 & 250. However, as the slider moves, the speed value it being set to values between 1-100. Any idea what’s going wrong here?
The Elm code looks fine, this seems like a HTML issue. I haven’t come across
datalist before so nothing is jumping out at me. I’d suggest trying to get it working in a plain HTML file first, then translate it back to Elm.
input elements are closed – they can’t have any children. Moving the
datalist out of the
input's child list renders it in the page
- The range your input covers has to include the values of the list. Setting a
max accomplishes this.
In this updated example you can feel a slight stickiness around the suggested values as you slide the slider. https://ellie-app.com/LWXscKMhtLa1
Also, you should set
max attributes right after the
type attribute and set
defaultValue last. This will avoid the initial position of the slider being at the wrong location.
Like so: https://ellie-app.com/MPF5Mp4LJ7a1
I couldn’t stop playing with this a little more. This is perhaps an ugly behaving implementation of a slider with discrete options: https://ellie-app.com/MV87KBNWGMa1
You don’t even need the
datalist with this method and even works well in Firefox which has not implemented the
list attribute of sliders.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.