我正在尝试使用离子范围滑块 2.0.3
URL : http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
所以我想用三种颜色修改该滑块。左、中、右亦然。我附上这张图片是为了了解我想要什么。
所以我需要你的帮助来定制这个滑块。
Thanks.
我也做了类似的事情。这里是实现它的相关CSS和JavaScript代码段。
假设我想要左侧绿色,中间黄色和右侧红色,那么
CSS
.irs-line-left {
background: #66b032;
width: 60%;
}
.irs-line-mid {
background: #FFBF00;
}
.irs-line-mid:before {
content: '';
background-color: #FF0000;
position: absolute;
left: 54%;
top: 0;
right: 0;
bottom: 0;
}
.budget-page .irs-line-right {
background: #FF0000;
width: 40%;
}
.budget-page .irs-line-mid {
width: 0 !important;
}
.irs-bar {
background: #FFBF00;
}
现在这就是窍门。当你改变这两个点时,我们需要改变左侧和右侧的宽度来动态改变颜色宽度。
JavaScript 部分。
var iri_line_left = $(".irs-line-left");
var iri_line_right = $(".irs-line-right");
$("#color-slider").ionRangeSlider({
type: "double",
min: 0,
max: 100,
from: 60,
to: 80,
grid: true,
onChange: function (data) {
var leftWidth = Math.ceil(data.from_percent);
var rightWidth = 100 - leftWidth;
// set left side width
iri_line_left.css({ 'width': leftWidth + "%" });
// set right side width
iri_line_right.css({ 'width': rightWidth + "%" });
}
});
希望对你有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)