Javascript slider that starts from middle?

Question

I need a slider that will start from the middle. The value should change from 0 to -100 and 0 to +100. Also, the selection (green) should start from the middle, like this

The requirement is to use http://rangeslider.js.org/, because its the only one supports the dynamic creation of multiple sliders (does not relly on elementID) Or maybe some other that you know ?

codepen.io/jalle007/pen/bLpgae

Any help would be appreciated.

What is the programming-problem-at-hands related question here? — Teemu, Feb 04 '18 at 08:33
Not sure why this got downvoted. It's a very clearly stated requirement: [how can I make a] Javascript slider that starts from the middle. And as far as I can see, the rangeslider object does not [straightforwardly] support the requirement. @Jalle I have same requirement. Did you have any luck? — ubienewbie, May 25 '18 at 07:16
alhtough I will say that -20 looks like it should be going DOWN/to the LEFT of the middle, rather than [apparently] UP/to the RIGHT of the middle. And therefore probably red not green in colour:) — ubienewbie, May 25 '18 at 07:18

Md Johirul Islam · Answer 1 · 2018-02-04T09:08:11.337

3

You have to set the properties in your input field. The library documentation states clearly how to change the value

    <input
    type="range"
    min="10"                    // default 0
    max="1000"                  // default 100
    step="10"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="vertical" // default horizontal
>

So you are just using the default value without setting manually and the default value is somewhere in the middle of the slider. You can start from anywhere you want by modifying these parameters. If you want to start the fill from somewhere else then you need to override the library default css property

    .rangeslider__fill {
    top: 0;
    height: 100%;
}

And you can rewrite as:

.rangeslider__fill {
    top: 0;
    left: 50%;
    height: 100%;
}

edited Feb 04 '18 at 09:08

answered Feb 04 '18 at 08:33

Md Johirul Islam

5,042
4
23
56

I am afraid ib this case the selection will start from the left. I need it to start from the MIDDLE and then select to the left or the right. – Jalle Feb 04 '18 at 08:59
You need override some library default `CSS` properties and modify as per you want – Md Johirul Islam Feb 04 '18 at 09:09
I suggest you to inspect the slider in your google chrome developer tool and see which css rules are having what kind of effect. Then you will come up with an understanding which css rules you need to override to achieve your desired goal – Md Johirul Islam Feb 04 '18 at 09:15
I am afraid that does not work. when I apply your CSS this is what I get : http://jsfiddle.net/jalle007/hvh5x696/ – Jalle Feb 04 '18 at 14:20
Hi. I have just showed a sample how to move the fill to center. You may need to apply other css rules as per your requirement. My main point of the edit was to make you clear how can you customize the slider – Md Johirul Islam Feb 04 '18 at 15:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164506/discussion-between-jalle-and-md-johirul-islam). – Jalle Feb 04 '18 at 19:54

Javascript slider that starts from middle?

1 Answers1