2017-12-18 231 views
0

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

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

谢谢你的回答!

回答

0

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

0

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

在这里你有一个滑块,享受!

+0

谢谢你THW的答案,我可以看到我的问题是:混乱。我不想创建滑块(类似于表单窗体的输入),而是使用具有颜色渐变背景的固定值的垂直线的输出图。 – aqua

0

既然你想要最小最大值你需要创建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

希望这个答案可以帮助。

+0

谢谢你的回答,但是,我可以看到我的问题很混乱。我不想创建滑块(类似于表单窗体的输入),而是使用具有颜色渐变背景的固定值的垂直线的输出图。 – aqua