如何为网页创建滑块图？答案

【问题标题】：How to create a slider diagram for a webpage?如何为网页创建滑块图？
【发布时间】：2017-12-18 10:56:49
【问题描述】：

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

如果我有最大值和最小值以及我想要绘制的值，我该怎么做？最好是在使用 html/javascript/php 生成结果页面时即时创建它。

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

感谢您的任何回答！

【问题讨论】：

【解决方案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>

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

【讨论】：

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

【解决方案2】：

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

检查sn-p 下面。

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>

如果您想节省空间，您可以创建 1 个范围滑块和 2 个控制滑块。为范围滑块创建一个 html，然后应用一些 jquery。请检查下面的sn-p

<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>

那么如果你想提交数据到 db 你需要为此创建表单

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

我希望这个答案能有所帮助。

【讨论】：

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

【解决方案3】：

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

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

【讨论】：