Custom slider for elm-ui using SVG

Show and Tell
1

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.

slider

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: https://ellie-app.com/gBks2hGX6Yta1

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 https://cssgradient.io/ where you can interactively design your gradient.

6 Likes
2

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

3

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.

4

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