Creation of a specific slider

[MuslemRahimi]

Is it possible to create a slider in this form
I want that it should be green when the slider is above 0 and red when it's below zero

I would appreciate it a lot if this would be possible

[simeydotme]

Hi @MuslemRahimi ... this is not a built-in feature (positive-negative range) ... but it is fun, i've never seen it before.

it's totally possible with a little bit of CSS and custom events. I can do a demo for you later if you're OK with that. If you already have a solution, let me know.

[MuslemRahimi]

No solution yet, would be really nice if you can provide a demo :)

[simeydotme]

https://svelte.dev/repl/8947a3d09c3d442fa55d1db58093c6a7?version=4.2.11
^^ here you go. Edit as you need

[MuslemRahimi]

Thanks a lot. It does not work for me when I use min={-100} max={100}. The slider is not synced with the color anymore

[simeydotme]

you gotta use your brain a little , dude @_@

- --range: {Math.abs(values[0])}%
+ --range: {Math.abs(values[0]/2)}%

you doubled the range, so you needed to halve the %

[simeydotme]

could also do values[0] / ((max - min)/100)

100 - -100 = 200
200 / 100 = 2