如何爲網頁創建滑塊圖？

我想創建這樣一個滑塊圖對我的網頁顯示的結果：如何爲網頁創建滑塊圖？

我怎樣才能做到這一點提供我有一個最大和最小，我想繪製的價值？優選地，我想在使用html/javascript/php生成結果頁時即時創建它。編輯：我可以看到我的問題很混亂。我不想創建滑塊（類似於表單窗體的輸入），而是使用具有顏色漸變背景的固定值的垂直線的輸出圖。

謝謝你的回答！

來源

2017-12-18 aqua

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

來源

2017-12-18 14:04:39 aqua

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

在這裏你有一個滑塊，享受！

來源

2017-12-18 11:12:06 Robin

謝謝你THW的答案，我可以看到我的問題是：混亂。我不想創建滑塊（類似於表單窗體的輸入），而是使用具有顏色漸變背景的固定值的垂直線的輸出圖。 – aqua

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

希望這個答案可以幫助。

來源

2017-12-18 11:56:52

謝謝你的回答，但是，我可以看到我的問題很混亂。我不想創建滑塊（類似於表單窗體的輸入），而是使用具有顏色漸變背景的固定值的垂直線的輸出圖。 – aqua

如何爲網頁創建滑塊圖？

回答

相關問題