jQuery-Plugin with D3.js: Time Range Wheel Slider (Circular Knob Slider)

This circular range slider provides a 24 hours time range select functionality. The step width is set per default to 5 minutes.

Minimal html configuration

<div class="graph-left"></div>
<div id="knobcontainer"></div>
<div class="graph-right"></div>
<div class="graph-center"></div>

jQuery initialization and customization

This plugin requires jQuery (>= 1.8.x) and D3.js (>= v5.4.0)
Font Awesome (4.4.x) is used for the handles inner icon symbols.

$("#knobcontainer").timerangewheel({
	indicatorWidth: 12,
	handleRadius: 15,
	handleStrokeWidth: 1,
	accentColor: '#fed766',
	handleIconColor: "#8a9097",
	handleStrokeColor: "#8a9097",
	handleFillColorStart: "#374149",
	handleFillColorEnd: "#374149",
	tickColor: "#8a9097",
	indicatorBackgroundColor: "#8a9097",
	data: {"start":"19:10", "end":"02:00"},
	onChange: function (timeObj) {
		$(".graph-left").html("Start: "+timeObj.start);
		$(".graph-right").html("End: "+timeObj.end);
		$(".graph-center").html("Duration: "+timeObj.duration);
	}
});

Parameters

Parameter	Description
`indicatorWidth`	width of the indicator circle segment in pixel
`handleRadius`	radius of the handles in pixel
`handleStrokeWidth`	stroke width of the handle ring in pixel
`accentColor`	color of the indicator circle segment
`handleIconColor`	font color of the handles icons
`handleStrokeColor`	stroke color of the handle ring
`handleFillColorStart`	color of the start handles inner circle
`handleFillColorEnd`	color of the end handles inner circle
`tickColor`	color of the clock ticks
`indicatorBackgroundColor`	color of the indicator circle segment striped background
`data`	the initial data object needs start and end parameter

Methods

Parameter	Description
`onChange`	call back function for the selected time values returns an object with start, end and duration parameters (formated as time string in 24 hour format)

Download

Plugin minified version
View project on Github: Github Repository