如何为网页创建滑块图？

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>

如果您想节省空间，可以使用2个控制滑块创建1个范围滑块。为范围滑块创建一个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>

然后，如果要向db提交数据，则需要为此创建表单

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

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

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

如何为网页创建滑块图？

问题描述投票：0回答：3

3个回答

最新问题

如何为网页创建滑块图？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3