如何为网页创建滑块图？

Question

我想为我的网页创建一个这样的滑块图来显示结果：

如果我有最大值和最小值以及我想要绘制的值，我该怎么做？最好，我想在使用 html/javascript/php.

生成结果页面时即时创建它

编辑：我可以看到我的问题令人困惑。我不想创建一个滑块（如表单表单的输入），而是一个输出图，它有一条垂直线，颜色渐变背景为固定值。

感谢您的任何回答！

Answer 1

<html>
<style>
#slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    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;
    background: #4CAF50;
    cursor: pointer;
}

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



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

</body>
</html>

这里有一个滑块，尽情享受吧！

Answer 2

由于您需要最小值-最大值，因此您需要创建 2 个范围滑块。

检查片段下面。

var rangeSlider = function(){
  var slider = $('.range-slider'),
      range = $('.range-slider__range'),
      value = $('.range-slider__value');
    
  slider.each(function(){

    value.each(function(){
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function(){
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="range-slider">
  <label>Min.</label>
  <input class="range-slider__range" type="range" value="100" min="0" max="500">
  <span class="range-slider__value">0</span>
</div>

<div class="range-slider">
 <label>Max.</label>
  <input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
  <span class="range-slider__value">0</span>
</div>

如果你想保存 space，你可以创建 1 个范围滑块和 2 个控制滑块。为范围滑块创建一个 html，然后应用一些 jquery。请检查下面的片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"  media="screen">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>




      <div data-role="rangeslider">
        <label for="price-min">Price:</label>
        <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
        <label for="price-max">Price:</label>
        <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
      </div>

然后如果你想提交数据到数据库你需要为此创建表单

范围滑块参考：https://www.w3schools.com/howto/howto_js_rangeslider.asp

希望这个回答能对您有所帮助。

Answer 3

终于，我明白了。只需 HTML 和 CSS（以及 PHP，如果我希望能够使用 style="left:x%" 动态分配垂直线）

.grad {
 background: linear-gradient(to right, rgba(185, 74, 72, 0.75), rgba(192, 152, 83,0.25), rgba(70, 136, 71,0.75));
 width: 100px;
 height: 15px;
 border-radius: 24px;
 border-color: #446e9b;
 border-width: 1px;
}

.vertical-line {
 width: 1px;
 height: 15px;
 border-left: 2px solid #446e9b;
 position: relative;
 top: 0;
 background: none;
}

.tick {
 width: 1px;
 height: 5px;
 border-left: 1px solid #999999;
 position: relative;
 top: 0;
 background: none;
}

.bottom-tick {
 margin-top: -5px;
}

.top-tick{
  margin-top: -5px;
}

.inner10{
 z-index: 10;
}
.inner2{
 z-index: 2;
 left: 20%;
 margin-top: -15px;
}
.inner3{
 z-index: 3;
 left: 40%;
}
.inner4{
 z-index: 4;
 left: 60%;
}
.inner5{
 z-index: 5;
 left: 80%;
}
.inner6{
 z-index: 6;
 left: 20%;
}
.inner7{
 z-index: 7;
 left: 40%;
}
.inner8{
 z-index: 8;
 left: 60%;
}
.inner9{
 z-index: 9;
 left: 80%;
}

<div class="grad">
  <div class='vertical-line inner10' style="left:35%"></div>
  <div class='tick inner6 bottom-tick'></div>
  <div class='tick inner7 bottom-tick'></div>
  <div class='tick inner8 bottom-tick'></div>
  <div class='tick inner9 bottom-tick'></div>
  <div class='tick inner2'></div>
  <div class='tick inner3 top-tick'></div>
  <div class='tick inner4 top-tick'></div>
  <div class='tick inner5 top-tick'></div>
</div>

如何为网页创建滑块图？

How to create a slider diagram for a webpage?

php

diagram

webpage

slider