Issue

This Content is from Stack Overflow. Question asked by Leaner

I’m making sliders bar.
I want to put a memory like 0 1 2 3 4 under the slider like in the picture
Same as bar length.

Ideal one

Mine

How can I make it look like the ideal?

My code is like this now.

          <input className="col-8" type="range" name="speed" min="0" max="100" 
          value={brightness_value} onChange={handleSliderChange}></input><br></br>
          <br></br>
          <p>0 1 2 3 4</p>

Solution

Position the range marks using CSS Flexbox:

<div class="range-marks">
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

.range-marks {
  display: flex;
  justify-content: space-between;
}

Put the input element and range marks inside a container and make input width 100%. Change the width of the whole control by applying CSS or classes (e.g. col-8) to the container element.

Result:

.range-marks {
  display: flex;
  justify-content: space-between;
}

.range-input {
  width: 100%;
}

.range-container {
  width: 300px;
}

<div class="range-container">
  <input class="range-input" type="range" name="speed" min="0" max="100" />

  <div class="range-marks">
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</div>

https://jsfiddle.net/n9e61k0L/

This Question was asked in StackOverflow by Leaner and Answered by Dimitris Maragkos It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.