如果我尝试将 ionic 范围 slider (可在此处获取:https://github.com/IonDen/ion.rangeSlider)的默认颜色从红色(默认)更改为蓝色,如下所示:
.irs-slider.single {
background: blue;
}
变成正方形:
我做错了什么?
演示
https://jsfiddle.net/chapkovski/xpvt214o/995048/
$(".js-range-slider").ionRangeSlider({
type: "single",
min: 0,
max: 1000,
from: 200,
to: 500,
grid: true
});
.irs-slider.single {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.css">
<input type="text" class="js-range-slider" name="my_range" value="" />
最佳答案
Below snippet for change whole ion range slider color to any color
$(".js-range-slider").ionRangeSlider({
type: "single",
min: 0,
max: 1000,
from: 200,
to: 500,
grid: true
});
.irs--flat .irs-handle>i:first-child {
background-color: #4e73df!important;//Replace With Your color code
}
.irs--flat .irs-bar {
background-color: #4e73df!important;//Replace With Your color code
}
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
background-color: #4e73df!important;//Replace With Your color code
}
.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
border-top-color: #4e73df!important;//Replace With Your color code
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
<input type="text" class="js-range-slider" name="my_range" value="" />
关于css - 改变 ionic 范围 slider handle 的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53745228/