Как изменить цвет диапазоне?
Нашел в интернете nouislider и как понял за закраску диапазона отвечает .noUi-connect , присваиваю ему background и ничего не закрашивается , в чем проблема ?
const app = new Vue({
el: '#app',
data() {
return {
minRange: null,
maxRange: null,
slider: {
startMin: 25,
startMax: 75,
min: 0,
max: 100,
start: 40,
step: 1
}
}
},
methods: {
updateSlider: function updateSlider() {
this.$refs.slider.noUiSlider.set([this.minRange, this.maxRange]);
}
},
mounted: function() {
noUiSlider.create(this.$refs.slider, {
start: [this.slider.startMin, this.slider.startMax],
step: this.slider.step,
range: {
'min': this.slider.min,
'max': this.slider.max
}
});
this.$refs.slider.noUiSlider.on('update',(values, handle) => {
this[handle ? 'maxRange' : 'minRange'] = parseInt(values[handle]);
});
}
});.noUi-target, .noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
}
.noUi-base, .noUi-connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1
}
.noUi-connects {
overflow: hidden;
z-index: 0
}
.noUi-connect, .noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
right: 0;
height: 100%;
width: 100%;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
transform-style: flat
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
left: 0;
right: auto
}
.noUi-vertical .noUi-origin {
top: -100%;
width: 0
}
.noUi-horizontal .noUi-origin {
height: 0
}
.noUi-handle {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute
}
.noUi-touch-area {
height: 100%;
width: 100%
}
.noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin {
-webkit-transition: transform .3s;
transition: transform .3s
}
.noUi-state-drag * {
cursor: inherit!important
}
.noUi-horizontal {
height: 18px
}
.noUi-horizontal .noUi-handle {
width: 25px;
height: 25px;
border-radius: 50%;
background: #000000;
right: -17px;
top: -6px
}
.noUi-vertical {
width: 18px
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
right: -6px;
bottom: -17px
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
left: -17px;
right: auto
}
.noUi-target {
background: rgba(0, 0, 0, 0.12);
border-radius: 6px;
width: 418px;
height: 10px;
}
.noUi-connects {
border-radius: 3px
}
.noUi-connect {
background: linear-gradient(91.45deg, #0098FF 26.77%, #0066FF 76.25%);
}
.noUi-draggable {
cursor: ew-resize
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.js"></script>
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.js"></script>
<div class="" id="app">
<div id="slider" ref="slider"></div>
<br>
<input v-model="minRange" v-on:change="updateSlider" />
<input v-model="maxRange" v-on:change="updateSlider"/>
</div>
</div>
<script src="./qwe.js"></script>
<script src="./nouislider.min.js"></script>
</body>
</html>Источник: Stack Overflow на русском