Slider values from minus to plus (like -180 to 180) for a balance-knob (Left to Right)

[pbc278]

Hi I have a request;

Make the slider behave like a balance knob that goes from left to right (negative value to positive value also the range color).

The handle starts in the middle and goes to the left a negative value and to the right a positive value.
The range should color accordingly, so it starts off white when value is 0 then the handle goes to the left and the value goes negative also the left part will color... For right it's the other way around (positive value, color as the handle moves to the right...

<input type="range" min="-50" max="50" step="1" value="0">

edit: As I go through your fiddles I think I see something that comes close, but it's only the full circle slider, I need half-top: https://jsfiddle.net/soundar24/135gh789/

[soundar24]

ya, got your point. I just made a POC sample for your requirement, check the below:
https://jsfiddle.net/soundar24/u0ekajqp/4/
http://jsfiddle.net/soundar24/u0ekajqp/3/

Also, can you let me know your actual requirement and usecase/scenario. So that it is much better to understand the requirement, and based on that I will provide a generic solution.

[pbc278]

Wow! that's great! It's for a mixer-like gui where there is a knob for bass-treble (left is more bass, right is more treble. And for an actual balance knob (left and right).

In the javascript code I link the negative value to the left side and the positive value to the right side... But I Math.abs on the tooltip values...

But there are probably much more use-cases to think of...

Super thanks for posting the fiddles so quickly!

Greetings from the Netherlands.

[pbc278]

so I've added this:

        if(e.value < 0) {
               return Math.abs(e.value);
               
        }

The value is always positive now.
Is it possible to lose the first number, because you don't need it, not as a value and not in the tooltip...
It should behave like a 'min-range' slider with 1 value...

And now the lineCap:round does not behave as expected, because the path are 2 separate tracks.

[soundar24]

yes, good finding... so, I have modified the logic based on your requirement with some workaround.

I hope the demo was the expected one:

https://jsfiddle.net/soundar24/ko790ugq/

https://jsfiddle.net/soundar24/ko790ugq/2/

Please check and let me know your comments. And I ll try to include this behaviour in source level. Also I am curious to know the actual usage of this. If you have any public demo (or UX screenshot), can you showcase me. That's much better to understand the usecase.

[soundar24]

@pbc278 in roundSlider version 1.4.1, I have added the property startValue to achieve this behaviour.

And now no need of this workaround, you can simply achieve this through this property. Check the below demo:

https://jsfiddle.net/soundar24/09ejun8b/1/

So I will close this, If you have any clarifications then you can let me know.