Question

例如，如果用户在范围滑块中位于22，则不要让用户下降至21，依此类推。用户应该只能滚动到右侧。我正在使用范围滑块选择计划，但我不希望用户将计划降级，这就是为什么我需要此功能。有可能吗？

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .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: #4CAF50;
      cursor: pointer;
    }

    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
    </style>
    </head>
    <body>

    <h1>Round Range Slider</h1>

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

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

    slider.oninput = function() {
      output.innerHTML = this.value;
    }
    </script>

    </body>
    </html>

Answer 1

您可以维护一个变量，该变量保留先前的值，并防止用户将值设置为比变量所保留的值低。

var prev_value = 50 //For example;


slider.oninput = function(ev) {
  if (parseInt(ev.target.value) < prev_value) {
    ev.preventDefault();
    this.value = prev_value;
  }
  output.innerHTML = this.value;
}

这是一个小提琴-https://jsfiddle.net/L5tgx8ys/1/

Answer 2

这应该对您有用。

请不要让该值低于最小值。

var minValue = 0;
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function(e) {
  if (slider.value > minValue) {
    output.innerHTML = this.value;
    minValue = this.value;
  } else {
    this.value = minValue;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .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: #4CAF50;
      cursor: pointer;
    }
    
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h1>Round Range Slider</h1>

  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    <p>Value: <span id="demo"></span></p>
  </div>


</body>

</html>

在范围滑块中如何禁用降级

2 个答案: