Custom slider for elm-ui using SVG

Quite seldom that I need a slider for input but when I do, I want it to look specific. :smile:

Well, I had seen that elm-ui has possibilities to design both the background and the knob of a slider. So for a game where users are selecting probability, I came up with this solution.


The user can adjust value by pressing and moving, as slider normally work.

The knob, or thumb, is invisible but that required that the focus style was set or a small blue square would appear.

Here is the Ellie:

As you can see in the code, I used elm/svg but it is of course possible to use an external image. Mind that some of the function names in that package overlap, eg style, with other packages functions.

When I was looking for a linear gradient, I bumped into this site where you can interactively design your gradient.


Very nice! A small thing, when I move my mouse below the slider I was expecting the needle to go flat, either to 0 or to 1, depending if I am on the left or on the right. In other words I think you should account also for the vertical position of the mouse

Thanks. If I had made the control myself, it would make perfect sense. But now I have only slapped an illustration on top of an elm-ui control.

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