Question

我想设置一个滑块以允许人们设置事物之间的比例，我已将其设置为读取相关值，但我不确定如何将每个部分中的颜色设置为不同以使其成为可能更清楚地看到滑块的用途。

那我该怎么做呢？

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

@Component（{ ... 封装：ViewEncapsulation.None， }）

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

2 个答案: