-1

I have a range input that goes from a negative to a positive and I want to indicate the position 0.

what I do at the moment is indicating it with datalist:

 <input  type=range min=-4830 max=2000 value=50 id=fader step=1 list="numbers" />
    <datalist id="numbers">
      <option>0</option>
    </datalist>

But the problem is that it stays stuck to the 0 when I change cursor. And also it's not enough visible.

how can I do? And can I add a "0" on top of the tick to indicate position of it? change its css?

regards

lopata
  • 1,325
  • 1
  • 10
  • 23

1 Answers1

0

How about indicating the selected value?

<input id='rangeInput' type=range min=-4830 max=5000 value=50 step=1 list="numbers" oninput="amount.value=rangeInput.value" />
<output id="amount" name="amount" for="rangeInput">0</output>
<datalist id="numbers">
<option>0</option>
</datalist>

See it in action

EDIT

Updated code, combined with yours. Should be clear enough to mark and show value I think.

EDIT 2

A simple solution could be something like this:

HTML: 

<div id="cont">
<span id="zero">0</span>
<input id='rangeInput' type=range min=-4830 max=5000 value=50 step=1 list="numbers" oninput="amount.value=rangeInput.value" />
<datalist id="numbers">
<option>0</option>
</datalist>
</div>
<output id="amount" name="amount" for="rangeInput">0</output>

CSS:

#cont {
    position: relative;
    width: 400px;
}
#zero {
    position:absolute;
    left:50%;
    color: lightgray;
}

#rangeInput {
    margin-top: 20px;
    width: 410px;
}

The zero will be in the middle of the cont <div> element. You can try moving it around. I increased width, because the range is big.

Updated fiddle here

DDan
  • 8,068
  • 5
  • 33
  • 52