如何为网页创建滑块图？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我怎样才能做到这一点提供我有一个最大和最小，我想绘制的价值？优选地，我想在使用html/javascript/php生成结果页时即时创建它。编辑： 我可以看到我的问题很混乱。我不想创建滑块（类似于表单窗体的输入），而是使用具有颜色渐变背景的固定值的垂直线的输出图。

谢谢你的回答！

回答：

最后，我明白了。只是HTML和CSS（和PHP，如果我希望能够通过使用style="left:x%"动态分配的垂直线），但是

.grad {  
\t background: linear-gradient(to right, rgba(185, 74, 72, 0.75), rgba(192, 152, 83,0.25), rgba(70, 136, 71,0.75));  
\t width: 100px;  
\t height: 15px;  
\t border-radius: 24px;  
\t border-color: #446e9b;  
\t border-width: 1px;  
}  
.vertical-line {  
\t width: 1px;  
\t height: 15px;  
\t border-left: 2px solid #446e9b;  
\t position: relative;  
\t top: 0;  
\t background: none;  
}  
.tick {  
\t width: 1px;  
\t height: 5px;  
\t border-left: 1px solid #999999;  
\t position: relative;  
\t top: 0;  
\t background: none;  
}  
.bottom-tick {  
\t margin-top: -5px;  
}  
.top-tick{  
    margin-top: -5px;  
}  
.inner10{  
\t z-index: 10;  
}  
.inner2{  
\t z-index: 2;  
\t left: 20%;  
\t margin-top: -15px;  
}  
.inner3{  
\t z-index: 3;  
\t left: 40%;  
}  
.inner4{  
\t z-index: 4;  
\t left: 60%;  
}  
.inner5{  
\t z-index: 5;  
\t left: 80%;  
}  
.inner6{  
\t z-index: 6;  
\t left: 20%;  
}  
.inner7{  
\t z-index: 7;  
\t left: 40%;  
}  
.inner8{  
\t z-index: 8;  
\t left: 60%;  
}  
.inner9{  
\t z-index: 9;  
\t 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>

回答：

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

，如果你想节省空间，您可以创建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

希望这个答案可以帮助。

以上是 如何为网页创建滑块图？ 的全部内容， 来源链接： utcz.com/qa/262710.html

回到顶部