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.
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>
The output should look like the following:
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.
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>
The output should look like the following:
Share Improve this question edited Jan 4, 2017 at 1:44 user2657817 asked Jan 2, 2017 at 15:38 user2657817user2657817 6522 gold badges9 silver badges21 bronze badges2 Answers
Reset to default 1You can do this with CSS alone by parenting it to the div:
In your HTML:
<div id="testslider"></div>
<div id="testslider2"></div>
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;
}
Updated fiddle.
Running code:
.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="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare./ajax/libs/d3/3.5.17/d3.js"></script>
<link rel="stylesheet" href="https://rawgit./sujeetsr/d3.slider/master/d3.slider.css" />
<script src="https://rawgit./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>You need to add a div and change the fill color here is an example.
d3.slider = function module() {
"use strict";
var div, min = 0,
max = 100,
svg, svgGroup, value, classPrefix, axis,
height = 20,
rect,
rectHeight = 5,
tickSize = 6,
margin = {
top: 25,
right: 25,
bottom: 15,
left: 25
},
ticks = 0,
tickValues, scale, tickFormat, dragger, width,
range = false,
callbackFn, stepValues, focus;
function slider(selection) {
selection.each(function() {
div = d3.select(this).classed('d3slider', true);
width = parseInt(div.style("width"), 7.5) - (margin.left + margin.right);
value = value || min;
scale = d3.scale.linear().domain([min, max]).range([0, width])
.clamp(true);
// SVG
svg = div.append("svg")
.attr("class", "d3slider-axis")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left +
"," + margin.top + ")");
// Range rect
svg.append("rect")
.attr("class", "d3slider-rect-range")
.attr("width", width)
.attr("height", rectHeight);
// Range rect
if (range) {
svg.append("rect")
.attr("class", "d3slider-rect-value")
.attr("width", scale(value))
.attr("height", rectHeight);
}
// Axis
var axis = d3.svg.axis()
.scale(scale)
.orient("bottom");
if (ticks != 0) {
axis.ticks(ticks);
axis.tickSize(tickSize);
} else if (tickValues) {
axis.tickValues(tickValues);
axis.tickSize(tickSize);
} else {
axis.ticks(0);
axis.tickSize(0);
}
if (tickFormat) {
axis.tickFormat(tickFormat);
}
svg.append("g")
.attr("transform", "translate(0," + rectHeight + ")")
.call(axis)
//.selectAll(".tick")
//.data(tickValues, function(d) { return d; })
//.exit()
//.classed("minor", true);
var values = [value];
dragger = svg.selectAll(".dragger")
.data(values)
.enter()
.append("g")
.attr("class", "dragger")
.attr("transform", function(d) {
return "translate(" + scale(d) + ")";
})
var displayValue = null;
if (tickFormat) {
displayValue = tickFormat(value);
} else {
displayValue = d3.format(",.2f")(value);
}
dragger.append("text")
.attr("x", 0)
.attr("y", -15)
.attr("text-anchor", "middle")
.attr("class", "draggertext")
// .text(displayValue);
dragger.append("circle")
.attr("class", "dragger-outer")
.attr("r", 10)
.attr("transform", function(d) {
return "translate(0,6)";
});
dragger.append("circle")
.attr("class", "dragger-inner")
.attr("r", 4)
.attr("transform", function(d) {
return "translate(0,6)";
});
// Enable dragger drag
var dragBehaviour = d3.behavior.drag();
dragBehaviour.on("drag", slider.drag);
dragger.call(dragBehaviour);
// Move dragger on click
svg.on("click", slider.click);
});
}
slider.draggerTranslateFn = function() {
return function(d) {
return "translate(" + scale(d) + ")";
}
}
slider.click = function() {
var pos = d3.event.offsetX || d3.event.layerX;
slider.move(pos);
}
slider.drag = function() {
var pos = d3.event.x;
slider.move(pos + margin.left);
}
slider.move = function(pos) {
var l, u;
var newValue = scale.invert(pos - margin.left);
// find tick values that are closest to newValue
// lower bound
if (stepValues != undefined) {
l = stepValues.reduce(function(p, c, i, arr) {
if (c < newValue) {
return c;
} else {
return p;
}
});
// upper bound
if (stepValues.indexOf(l) < stepValues.length - 1) {
u = stepValues[stepValues.indexOf(l) + 1];
} else {
u = l;
}
// set values
var oldValue = value;
value = ((newValue - l) <= (u - newValue)) ? l : u;
} else {
var oldValue = value;
value = newValue;
}
var values = [value];
// Move dragger
svg.selectAll(".dragger").data(values)
.attr("transform", function(d) {
return "translate(" + scale(d) + ")";
});
var displayValue = null;
if (tickFormat) {
displayValue = tickFormat(value);
} else {
displayValue = d3.format(",.2f")(value);
}
svg.selectAll(".dragger").select("text")
//.text(displayValue);
if (range) {
svg.selectAll(".d3slider-rect-value")
.attr("width", scale(value));
}
if (callbackFn) {
callbackFn(slider);
}
}
// Getter/setter functions
slider.min = function(_) {
if (!arguments.length) return min;
min = _;
return slider;
};
slider.max = function(_) {
if (!arguments.length) return max;
max = _;
return slider;
};
slider.classPrefix = function(_) {
if (!arguments.length) return classPrefix;
classPrefix = _;
return slider;
}
slider.tickValues = function(_) {
if (!arguments.length) return tickValues;
tickValues = _;
return slider;
}
slider.ticks = function(_) {
if (!arguments.length) return ticks;
ticks = _;
return slider;
}
slider.stepValues = function(_) {
if (!arguments.length) return stepValues;
stepValues = _;
return slider;
}
slider.tickFormat = function(_) {
if (!arguments.length) return tickFormat;
tickFormat = _;
return slider;
}
slider.value = function(_) {
if (!arguments.length) return value;
value = _;
return slider;
}
slider.showRange = function(_) {
if (!arguments.length) return range;
range = _;
return slider;
}
slider.callback = function(_) {
if (!arguments.length) return callbackFn;
callbackFn = _;
return slider;
}
slider.setValue = function(newValue) {
var pos = scale(newValue) + margin.left;
slider.move(pos);
}
slider.mousemove = function() {
var pos = d3.mouse(this)[0];
var val = slider.getNearest(scale.invert(pos), stepValues);
focus.attr("transform", "translate(" + scale(val) + ",0)");
focus.selectAll("text").text(val);
}
slider.getNearest = function(val, arr) {
var l = arr.reduce(function(p, c, i, a) {
if (c < val) {
return c;
} else {
return p;
}
});
var u = arr[arr.indexOf(l) + 1];
var nearest = ((value - l) <= (u - value)) ? l : u;
return nearest;
}
slider.destroy = function() {
div.selectAll('svg').remove();
return slider;
}
return slider;
};.d3slider {
z-index: 2;
height: 100%;
background: none;
}
.d3slider-rect-range {
fill: #777;
stroke: none;
}
.d3slider-rect-value {
fill: #006EE3;
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;
}
#testslider2 .d3slider-rect-value {
fill: #000;
}<link rel="stylesheet" href="https://rawgit./sujeetsr/d3.slider/master/d3.slider.css" />
<script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare./ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://rawgit./sujeetsr/d3.slider/master/d3.slider.js"></script>
<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);
var slider2 = d3.slider().min(0).max(1).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>