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 >
  <input type="range" min="1" max="3" value="2"  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

CodePudding user response：

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 >
  <input type="range" min="1" max="3" value="2"  id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

CodePudding user response：

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.

const slider = document.getElementById("myRange");
const output = document.getElementById("demo");
const valueMap = {
  1: 'None',
  2: 'Open',
  3: 'Close'
}

output.innerText = valueMap[slider.value];

slider.oninput = function() {
  output.innerText = valueMap[this.value];
}

.slidecontainer {
  width: 100%;
}

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

.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;
}

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