如何为网页创建滑块图?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何为网页创建滑块图?相关的知识,希望对你有一定的参考价值。

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

如果我有最大值和最小值以及我想绘制的值,我该怎么做?我希望在使用html / javascript / php生成结果页面时动态创建它。

编辑:我可以看到我的问题令人困惑。我不想创建一个滑块(如表单表单的输入),而是一个输出图表,其垂直线为固定值,带有颜色渐变背景。

谢谢你的答案!

答案

<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个范围滑块。

查看下面的代码段。

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>
另一答案

最后,我明白了。只是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>

以上是关于如何为网页创建滑块图?的主要内容,如果未能解决你的问题,请参考以下文章

如何为滑块(sliderInput)着色?

如何为滑块的分页按钮创建简单的下一个和上一个触发按钮?

您如何为用于 jquery 编码的菜单栏正确编写 CSS 代码?

如何为手机构建滑块拼图软件

如何为 mac 应用程序制作音量滑块

Flex Slider - 如何为两个滑块添加相同的控件