How to add indexing marks and values to input type range

Question

Hi I'm trying to add a label to the range slider I had tried using options but it is not working.

How can I make range value 100% it is showing an overall 4% because of Max="4" i want to increase 25% every slide and make it 100% in 4 steps Can anyone suggest to me how do I add a label to the range slide.

var slider = document.querySelector('#slider');

function range_change_event() {
  var percent = slider.value;
  lbl.textContent = percent + '%';
}
slider.addEventListener('input', range_change_event);

<input id="slider" type="range" min="1" max="4" step="0" list="volsettings" />
<label id="lbl" id="value" for="slider">0%</label>
<datalist id="volsettings">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  </datalist>
</div>

Trying to achieve desire output

see codepen.io/trevanhetzel/pen/rOVrGK

Ahmed Hasn.
– Ahmed Hasn.

2021-02-04 14:37:53 +00:00
Commented Feb 4, 2021 at 14:37 — Ahmed Hasn.
– Ahmed Hasn., Commented Feb 4, 2021 at 14:37
I used google for 2 seconds, thats why

Ahmed Hasn.
– Ahmed Hasn.

2021-02-04 14:41:19 +00:00
Commented Feb 4, 2021 at 14:41 — Ahmed Hasn.
– Ahmed Hasn., Commented Feb 4, 2021 at 14:41

Rubén González · Accepted Answer · 2021-02-05 18:14:55Z

1

¿something like this?

<div style="width: 300px">
  <input style="width: 100%;" id="slider" type="range" min="0" max="100" step="25" />
  <div style="width: 100%; display: inline-block; padding-left: 8px;">
    <div style="display: inline-block;  width:24%; float:left;">|</div>
    <div style="display: inline-block;  width:24%; float:left;">|</div>
    <div style="display: inline-block;  width:24%; float:left;">|</div>
    <div style="display: inline-block;  width:24%; float:left;">|</div>
    <div style="display: inline-block;  float: left;">|</div>
  </div>
  <div style="width: 100%; display: inline-block; padding-left: 5px;">
    <div style="display: inline-block;  width:24%; float:left;">0</div>
    <div style="display: inline-block;  width:24%; float:left;">1</div>
    <div style="display: inline-block;  width:24%; float:left;">2</div>
    <div style="display: inline-block;  width:24%; float:left;">3</div>
    <div style="display: inline-block;  float: left;">4</div>
  </div>
</div>

<label id="lbl" id="value" for="slider" list="volsettings"></label>
<br />
<label id="lbl2" id="value" for="slider" list="volsettings"></label>



<script>
  var slider = document.querySelector('#slider');
  range_change_event();

  function range_change_event() {
    var percent = slider.value;
    lbl2.textContent = (percent / 25);
    lbl.textContent = percent + '%';
  }
  slider.addEventListener('input', range_change_event);
</script>

edited Feb 5, 2021 at 18:14

answered Feb 4, 2021 at 15:14

Rubén González

263 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Husna Over a year ago

@Rubén González I added but not working can you add the snippet of your code.

Rubén González Over a year ago

@Husna I have added the snippet, I hope it's what you need

Husna Over a year ago

@Rubén González it is working fine. how can we label to the range slide

Rubén González Over a year ago

@Husna i have modified the code to add the labels. I am not very proud of the css but maybe it works for you

Collectives™ on Stack Overflow

How to add indexing marks and values to input type range

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related