HTML5輸入類型範圍，最大值滑塊，和蜱

-2

<input type="range" min="0" max="100" step="10" value="40" />

現在我想顯示在步驟蜱就像在附加的圖像。可能嗎？有什麼辦法嗎？

來源

2017-02-22 Shadow Walker

哪個嘀嗒聲以及它們與步驟的關係？ – Mairaj

向我們展示你試過的東西？什麼是預期產出？ –

你想要什麼？請解釋你想要更詳細地實現的內容。 – George

與HTML5的輸入類型Range實現這一點，因爲它僅接受一個輸入

您可以通過使用jQuery滑塊實現這個檢查這個

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>slider</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#slider-range").slider({ 
 
     range: true, 
 
     min: 0, 
 
     max: 500, 
 
     values: [ 75, 300 ], 
 
     slide: function(event, ui) { 
 
     $("#amount").val("₹" + ui.values[ 0 ] + " - ₹" + ui.values[ 1 ]); 
 
     } 
 
    }); 
 
    $("#amount").val("₹" + $("#slider-range").slider("values", 0) + 
 
     " - ₹" + $("#slider-range").slider("values", 1)); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<p> 
 
    <label for="amount">Price range:</label> 
 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
    
 
<div id="slider-range"></div> 
 
    
 
    
 
</body> 
 
</html>

來源

2017-02-22 11:47:58

謝謝你的回答。我正在尋找這 –

有沒有蜱... OP要求Ticks。 – vsync

@vsync好，它顯示幻燈片上的值。我可以用它:) –

見伍德羅·巴洛的回答here。我來總結一下這裏：

的Internet Explorer（萬物）當您提供一步屬性，就像你的問題中支持這個開箱：

<input type="range" min="0" max="100" step="10" value="40" />

對於其他瀏覽器，需要不同的解決方法，可能帶來的副作用。在Chrome和Safari，你可以使用一個DataList提供的步驟：

<input type="range" min="0" max="100" step="25" list="steplist"> 
<datalist id="steplist"> 
    <option>0</option> 
    <option>25</option> 
    <option>50</option> 
    <option>75</option> 
    <option>100</option> 
</datalist>

在Firefox中，該解決方案更是精心製作的，包括自定義CSS - see this jsFiddle。

來源

2017-02-22 11:12:04 Lagostra

這假設是在評論部分 –

是不可能的

我給你製作了一張simple example，它會告訴你如何獲得w你想要的帽子。

此代碼會爲您生成滴答，並且您可以相應地更改滴答的數量和樣式。你應該自動生成HTML。

.rangeWrap { 
 
    width: 40%; 
 
} 
 
.rangeWrap input { 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
.rangeWrap .ticks { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 6px; 
 
    margin: -1.5em 5px 0 6px; 
 
    font: 10px Arial; 
 
    counter-reset: count -1; 
 
} 
 
.rangeWrap .ticks > div { 
 
    height: 100%; 
 
    width: 1px; 
 
    background: silver; 
 
    counter-increment: count 1; 
 
} 
 
.rangeWrap .ticks > div:nth-child(5n - 4) { 
 
    height: 200%; 
 
} 
 
.rangeWrap .ticks > div:nth-child(5n - 4)::before { 
 
    display: block; 
 
    content: counter(count,decimal); 
 
    transform: translate(-50%, 100%); 
 
    text-align: center; 
 
    width: 16px; 
 
}

<div class='rangeWrap'> 
 
    <input type="range" min="0" max="100" step="10" value="40" /> 
 
    <div class='ticks'> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
    </div> 
 
    </div>

來源

2017-02-22 12:10:33 vsync

謝謝你的這個sol。這可能是一個，但我更準確的是我在找什麼。我接受了這個答案。感謝您的幫助 –

@AsifAhmad - 沒問題。但是這個問題的標題顯然是要求** ticks **，並且我花時間創建了代碼，它可以滿足您的要求..您要求顯示刻度。我表現出蜱蟲）如果你一直想要一個多區域的話，花費我的時間對我來說並不公平。 – vsync

我想都ñ我女友做出這兩個混合:) –

我發現正是你是什麼後：

https://github.com/IonDen/ion.rangeSlider

來源

2017-02-28 10:26:16 vsync

這樣做本地/ polyfilled：

對於刻度線：伍德羅·巴洛answer（總結在@ Lagostra在這個問題上）是本地的解決方案，但它目前還不是很定製
對於雙滑塊：該[type="range"]規範包括一個multiple屬性，這應該是做到這一點......但在撰寫本文時沒有瀏覽器支持它。 http://leaverou.github.io/multirange/ polyfill適用於所有支持CSS變量的瀏覽器。

來源

2017-06-15 15:42:03 henry

HTML5輸入類型範圍，最大值滑塊，和蜱

回答

相關問題