Elm input range with custom options help

Learn
1

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?

2

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.

4

Two things:

  1. 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
  2. The range your input covers has to include the values of the list. Setting a min and 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

5

Also, you should set min and 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

6

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.

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.