search

karenpommeroy / rangeslide.js

Lightweight customizable range slider with labels (but without jQuery)
MIT License
9 stars 4 forks source link

Possibility to add a "0" option #2

Closed lukasmedia closed 5 years ago

lukasmedia commented 5 years ago

Hi,

I have 3 options in my rangeslider: 1: "Disagree" 2: "Neutral" 3: "Agree"

This works fine. However, i want my users to select every question. So i added an "empty" value:

0: "" 1: "Disagree" 2: "Neutral" 3: "Agree"

This looks great / works fine, however: if i choose "Disagree" there is a line between nothing (0) and 1 (disagree).

Is there any way we can hide the first blue line?

karenpommeroy commented 5 years ago

So you basically would like to have your line to start from second marker. If you just try to move and shorten the line via css I think this may cause some unexpected behavior.

You may try to cover unwanted portion of line with absolutely positioned div that has greater z-index.

However since what you basically want is to have an unselected/untouched state maybe it would be better to present it differently? Instead of empty value maybe you could use some label like "Choose answer" or "Select value". You could even hide the thumb altogether until the user clicks the slider for the first time (instead of adding a "dummy" marker).

karenpommeroy commented 5 years ago

I've also did a quick test and it seems that just moving the tumb's initial position to the left might do the trick. U can use css left property for that.

http://oi65.tinypic.com/ic70hw.jpg

lukasmedia commented 5 years ago

Yes, a unselected/untouched state would also be helpful. I will checkout the css left property. If you have a code example; that would be nice.

karenpommeroy commented 5 years ago

Closing this one, future releases may include unselected state but for this one shifting to left does the trick.