html滑块显示刻度与数字,HTML5输入类型具有最小值滑块，最大值滑块和刻度的范围...

5 个答案:

答案 0 :(得分：3)

我已经让你simple example，它会告诉你如何得到你想要的东西。

此代码将为您生成刻度，您可以相应地更改刻度线及其样式。您应该自动生成HTML。

＆＃13;

＆＃13;

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

}＆＃13;

答案 1 :(得分：3)

使用HTML5实现此功能输入类型Range是不可能的，因为它只接受一个输入

您可以使用JQUERY滑块检查此来实现此目的

＆＃13;

＆＃13;

slider

$( 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 ) );

} );

Price range:

＆＃13;＆＃13;＆＃13;

答案 2 :(得分：1)

见Woodrow Barlow的回答here。我将在这里总结一下：

当您提供步骤属性时，Internet Explorer(所有内容)支持此功能，如您的问题所示：

对于其他浏览器，需要各种解决方法，可能会产生副作用。在Chrome和Safari中，您可以使用数据列表来提供以下步骤：

0

25

50

75

100

在Firefox中，解决方案更加精细，包括自定义css - see this jsFiddle。

答案 3 :(得分：1)

答案 4 :(得分：0)

本地执行此操作/ polyfilled：

对于刻度线：Woodrow Barlow的answer(@ Lagostra在这个问题上的总结)是本机解决方案，但它目前还不是很容易定制的

对于双滑块：[type="range"]规范包含multiple属性，应该完全按照这个...但在撰写本文时，没有浏览器支持它。 http://leaverou.github.io/multirange/ polyfill适用于所有支持CSS变量的浏览器。