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

5 个答案:

答案 0 :(得分:3)

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

此代码将为您生成刻度,您可以相应地更改刻度线及其样式。您应该自动生成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;

}

答案 1 :(得分:3)

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

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





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:





答案 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变量的浏览器。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值