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输入类型范围，最大值滑块，和蜱

回答

相关问题