nouislider - 如何将滑块设置为在第一个手柄之前、手柄之间和第二个手柄之后具有不同的颜色？

Question

我想设置一个滑块以允许人们设置事物之间的比率，我已将其设置为读取相关值但我不确定如何在每个部分中将颜色设置为不同以使其在视觉上更明显滑块的用途。

那么我该怎么做呢？

Answer 1

$("#slider").noUiSlider({
    start: [ 30, 70 ],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});

#slider .noUi-base {
    background: red;
}
#slider .noUi-background {
	background: blue;
}
#slider .noUi-connect {
	background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css" rel="stylesheet"/>
<script src="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<div id="slider"></div>

Answer 2

如果您使用的是 Angular 2+ noUISlider 组件：将其添加到您用来覆盖子组件的 css 的组件中。

@Component({ ... 封装：ViewEncapsulation.None, })