如何解决多色选定区域 - Seiyria 的 Bootstrap Slider
是否可以为 seyria-bootstrap-slider 制作多色“选定区域”?
也许有人能够帮助我。我将附在我的项目示例下方,以便您可以尝试测试。
var minSliderValue = $("#ex11").data("slider-min");
var maxSliderValue = $("#ex11").data("slider-max");
$('#ex11').slider({
ticks: [1,2,3,5,10,25,50,100],ticks_positions: [0,20,35,65,82.5,ticks_labels: ["1x","2x","3x","5x","10x","25x","50x","100x"],ticks_snap_bounds: 1,//0.5
ticks_tooltip: true,step: 1,max: 100,//JS script
tooltip: 'always',value: 10,//focus: true,formatter: function (value) {
return value + 'x';
},});
$("#input-value").on("keyup",function () {
var val = Math.abs(parseInt(this.value,10) || minSliderValue);
this.value = val > maxSliderValue ? maxSliderValue : val;
$('#ex11').slider('setValue',val);
});
$("#ex11").slider();
$("#ex11").on("slide",function (slideEvt) {
$("#ex11SliderVal").text(slideEvt.value);
});
#ex11Slider .slider-selection {
background: #FF8282;
}
#ex11Slider .slider-handle {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>
<div style="text-align:center">
<br>
<div>
<hr />
<input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="100"
data-slider-step="1" />
<span id="ex11CurrentSliderValLabel">Value: <span id="ex11SliderVal">10</span></span>
<hr />
</div>
解决方法
您可以使用linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()
var minSliderValue = $("#ex11").data("slider-min");
var maxSliderValue = $("#ex11").data("slider-max");
$('#ex11').slider({
ticks: [1,2,3,5,10,25,50,100],ticks_positions: [0,20,35,65,82.5,ticks_labels: ["1x","2x","3x","5x","10x","25x","50x","100x"],ticks_snap_bounds: 1,//0.5
ticks_tooltip: true,step: 1,max: 100,//JS script
tooltip: 'always',value: 10,//focus: true,formatter: function(value) {
return value + 'x';
},});
$("#input-value").on("keyup",function() {
var val = Math.abs(parseInt(this.value,10) || minSliderValue);
this.value = val > maxSliderValue ? maxSliderValue : val;
$('#ex11').slider('setValue',val);
});
$("#ex11").slider();
$("#ex11").on("slide",function(slideEvt) {
$("#ex11SliderVal").text(slideEvt.value);
});
body {
background-color: #0f121b!important;
color: #fff!important;
padding: 4rem 2rem;
}
#ex11Slider {
margin: 2rem;
width: 70%;
}
.slider-tick,.slider-handle {
background-color: #ffffff!important;
background-image: none!important;
opacity: 1!important;
}
.slider-track {
background-image: -webkit-gradient(linear,left top,right top,from(#129b6b),color-stop(#e5d02b),to(#b44b53))!important;
background-image: -o-linear-gradient(left,#129b6b,#e5d02b,#b44b53)!important;
background-image: linear-gradient(to right,#b44b53)!important;
}
.slider-selection.tick-slider-selection {
background-color: transparent!important;
background-image: none!important;
}
.slider-track-high {
background-color: #2d343e!important;
background-image: none!important;
}
.slider-tick-label.label-is-selection {
color: #4368bf!important;
font-weight: 500!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>
<div>
<input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
<span id="ex11CurrentSliderValLabel">Value: <span id="ex11SliderVal">10</span></span>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。