How can I create type="range" slider with text down?

Question

As you can see I am using the type="range" input slider for this purpose. But I need slider where I will have texts instead of numbers.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

<div class="slidecontainer">
  <input type="range" min="1" max="3" value="2" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

So I need three options "None", "Open" and "Close" and when I slide, automatically if will be moved to the text.

Something like this

Until now I just got the value that is slided on with

slider.oninput = function() {
  output.innerHTML = this.value;
}

but I need to insert some text dynamically when 1 is chosen then I need to have Open option for example etc...

Note: It needs to be responsive

image:

isherwood · Answer 1 · 2022-11-30T16:48:51.413

Answer revised to just address the label layout part of the question. Apparently there's no dynamic updating to be done.

I like to create a map object for cases like this, which makes updating things easy. The input value correlates to the object key.

Other tips:

Use let and const instead of var. They provide modern safety checks and more intuitive scoping.
You don't need vendor prefixes for CSS transition or appearance. See https://caniuse.com/mdn-css_properties_transition and https://caniuse.com/css-appearance.

.slidecontainer {
  width: 100%;
}

.slider {
  appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  margin: 0;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.labels {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

<div class="slidecontainer">
  <input type="range" min="1" max="3" value="2" class="slider" id="myRange">

  <div class="labels">
    <span>None</span>
    <span>Open</span>
    <span>Close</span>
  </div>
</div>

@isherwoord How can I center the text "open" according to the green circle ? Right now it is not centered — John333, Nov 30 '22 at 16:35
That's mostly due to the default margin on the input, which gets combined with your 100% width to make the input oversized. I zeroed it out. — isherwood, Nov 30 '22 at 16:49

score 1 · Answer 2 · answered Nov 30 '22 at 15:56

Couldn't you just use an object as a kind of lookup table? Where the predicate is the slider value, and the value is the string you want displayed? I may have misunderstood the question.

This is the code, and following is the snippet with it implemented.

const lookup = {
  1: 'None',
  2: 'Open',
  3: 'Closed'
}

...

output.innerHTML = lookup[this.value] ?? 'Invalid value';

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

const lookup = {
  1: 'None',
  2: 'Open',
  3: 'Closed'
}

output.innerHTML = lookup[this.value] ?? 'Invalid value';

slider.oninput = function() {
 output.innerHTML = lookup[this.value] ?? 'Invalid value';
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

<div class="slidecontainer">
  <input type="range" min="1" max="3" value="2" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

you mis understood my question.Please see the attached image and you will understand — John333, Nov 30 '22 at 16:03

How can I create type="range" slider with text down?

2 Answers2