shancarter/README.md

## README.md

      
    Raw
  

              README.md
            
          
    DESCRIPTION

A simple d3.js slider

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.slider {
  position: relative;
  top: 40px;
  left: 40px;
}

.slider-tray {
  position: absolute;
  width: 100%;
  height: 6px;
  border: solid 1px #ccc;
  border-top-color: #aaa;
  border-radius: 4px;
  background-color: #f0f0f0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.slider-handle {
  position: absolute;
  top: 3px;
}

.slider-handle-icon {
  width: 14px;
  height: 14px;
  border: solid 1px #aaa;
  position: absolute;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  top: -7px;
  left: -7px;
}

</style>
<body>
<div class="slider"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 500;

var x = d3.scale.linear()
    .domain([1, 100])
    .range([0, width])
    .clamp(true);

var dispatch = d3.dispatch("sliderChange");

var slider = d3.select(".slider")
    .style("width", width + "px");

var sliderTray = slider.append("div")
    .attr("class", "slider-tray");

var sliderHandle = slider.append("div")
    .attr("class", "slider-handle");

sliderHandle.append("div")
    .attr("class", "slider-handle-icon")

slider.call(d3.behavior.drag()
    .on("dragstart", function() {
      dispatch.sliderChange(x.invert(d3.mouse(sliderTray.node())[0]));
      d3.event.sourceEvent.preventDefault();
    })
    .on("drag", function() {
      dispatch.sliderChange(x.invert(d3.mouse(sliderTray.node())[0]));
    }));

dispatch.on("sliderChange.slider", function(value) {
  sliderHandle.style("left", x(value) + "px")
});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.slider {
	position: relative;
	top: 40px;
	left: 40px;
	}

	.slider-tray {
	position: absolute;
	width: 100%;
	height: 6px;
	border: solid 1px #ccc;
	border-top-color: #aaa;
	border-radius: 4px;
	background-color: #f0f0f0;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
	}

	.slider-handle {
	position: absolute;
	top: 3px;
	}

	.slider-handle-icon {
	width: 14px;
	height: 14px;
	border: solid 1px #aaa;
	position: absolute;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	top: -7px;
	left: -7px;
	}

	</style>
	<body>
	<div class="slider"></div>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script>
	var width = 500;

	var x = d3.scale.linear()
	.domain([1, 100])
	.range([0, width])
	.clamp(true);

	var dispatch = d3.dispatch("sliderChange");

	var slider = d3.select(".slider")
	.style("width", width + "px");

	var sliderTray = slider.append("div")
	.attr("class", "slider-tray");

	var sliderHandle = slider.append("div")
	.attr("class", "slider-handle");

	sliderHandle.append("div")
	.attr("class", "slider-handle-icon")

	slider.call(d3.behavior.drag()
	.on("dragstart", function() {
	dispatch.sliderChange(x.invert(d3.mouse(sliderTray.node())[0]));
	d3.event.sourceEvent.preventDefault();
	})
	.on("drag", function() {
	dispatch.sliderChange(x.invert(d3.mouse(sliderTray.node())[0]));
	}));

	dispatch.on("sliderChange.slider", function(value) {
	sliderHandle.style("left", x(value) + "px")
	});

	</script>