更改滑块颜色 [英] Changing slider color
本文介绍了更改滑块颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望能够创建多个不同颜色的滑块.我在网上找到的建议之一是在CSS文件中为每种颜色创建多个类，并在定义滑块时调用所需的类.
I want to be able to create multiple sliders of different colors. One of the suggestions I found online was to create multiple classes in my CSS file for each color and to call on the needed class when defining the slider.
目前尚不清楚如何在Javascript中覆盖CSS，以及如何相应地更改我的html文件.请在下面找到附加的代码:
It is not clear how to override CSS in Javascript and how to change my html file accordingly. Please find code attached below:
<body>
<div id="testslider"></div>
<script>
var slider = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true);
d3.select('#testslider').call(slider);
d3.selectAll(".tick>text").style("text-anchor", "start");
d3.selectAll(".tick:last-of-type>text").style("text-anchor", "end");
</script>
</body>
输出应如下所示:
推荐答案
您可以单独将CSS设置为 div :
You can do this with CSS alone by parenting it to the div:
在您的HTML中:
<div id="testslider"></div>
<div id="testslider2"></div>
JavaScript:
Javascript:
var slider = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true);
d3.select('#testslider').call(slider);
var slider2 = d3.slider();
d3.select('#testslider2').call(slider2);
CSS:
#testslider .d3slider-rect-value {
fill: #006EE3;
stroke: none;
}
#testslider2 .d3slider-rect-value {
fill: black;
stroke: none;
}
更新了小提琴.
运行代码:
.d3slider {
z-index: 2;
height: 100%;
background: none;
}
.d3slider-rect-range {
fill: #777;
stroke: none;
}
#testslider .d3slider-rect-value {
fill: #006EE3;
stroke: none;
}
#testslider2 .d3slider-rect-value {
fill: black;
stroke: none;
}
.d3slider-axis {
position: relative;
z-index: 1;
cursor: pointer;
}
.d3slider-axis path {
display: none;
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.d3slider-axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.d3slider text {
font: 10px sans-serif;
}
.tick.minor text {
display: none;
}
.tick line {
stroke-width: 1;
}
.tick.minor line {
stroke-width: 1;
stroke: #bbb;
}
.dragger rect {
fill: #71ACE3;
stroke: none;
z-index: 3;
}
.dragger line {
stroke: #aa0000;
fill: none;
}
.dragger-outer {
fill: #fff;
stroke: #000;
}
.dragger-inner {
fill: #B30424;
stroke: none;
}
.min-marker line {
stroke: #aa0000;
fill: none;
}
.overlay {
fill: none;
pointer-events: all;
z-index: 1;
}<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.css" />
<script src="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.js"></script>
</head>
<body>
<div id="testslider"></div>
<div id="testslider2"></div>
<script>
var slider = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true);
d3.select('#testslider').call(slider);
d3.selectAll(".tick>text").style("text-anchor", "start");
d3.selectAll(".tick:last-of-type>text").style("text-anchor", "end");
var slider2 = d3.slider().min(0).max(10).value(1).ticks(1).showRange(true);
d3.select('#testslider2').call(slider2);
d3.selectAll(".tick>text").style("text-anchor", "start");
d3.selectAll(".tick:last-of-type>text").style("text-anchor", "end");
</script>
</body>
</html>这篇关于更改滑块颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
