Creating a slider control
A slider is a control that allows a user to select a value within a given interval without having to type it. It has a handle that can be displaced over a base line; the position of the handler determines the selected value. The value is then used to update other components of the page. In this section, we will create a slider with D3 using the reusable chart pattern. We will include an API to change its visual attributes and modify other elements when the slider value changes. Note that in HTML5, we can create an input
element of type range
, which will be displayed as a slider with configurable minimum and maximum steps and values. The type color
is also available, which allows us to use the native color picker. Native controls include accessibility features and using the keyboard to control the slider. More details on the input element can be found in https://developer.mozilla.org/en/docs/Web/HTML/Element/Input. To follow the examples of this section, open the...