Range Slider

100%

✓ Published0🌍 Public

Last edited Sep 5, 2018

Created on Sep 5, 2018

This example presents a range slider visualization that lets users drag a handle to select a numeric value between 0 and 100. A large circular dragger and a triangular pointer both respond to mouse drags, with a label updating to show the current percentage. The implementation uses the d3-marcon library for layout, along with d3-scaleLinear for mapping data values to pixel coordinates, d3-drag for interactive dragging, and d3-axisBottom for rendering the scale. The slider’s body, axis, and dragger are styled via CSS classes.

AI-generated description

Use d3-selection, d3-scale, d3-drag, d3-axis and d3-marcon to make a range slider.

forked from <a href='http://bl.ocks.org/HarryStevens/'>HarryStevens</a>'s block: <a href='http://bl.ocks.org/HarryStevens/d1bc769436b43438d9b02d25a3315e0d'>Range Slider</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 range selecter

This example shows an interactive range selector built with D3 v7, displayed as a horizontal slider with two triangular drag handles positioned over an axis. Users adjust the left and right handles to select a numeric interval between a minimum of 34 and a maximum of 100, with the current range logged to the console on release. The visualization renders in SVG and uses d3.scaleLinear, d3.axisBottom, d3.drag, and d3.symbolTriangle to manage the scale, ticks, and handle movement. The handles are constrained so they cannot cross, and their positions are recalculated using scale inversion.

AAlpineStranger

85% match

Loading thumbnail…

Range Slider D3 V4

This example shows an interactive range slider built with D3 v4, where a user can brush along a band scale to select a subset of values from a fixed array of numbers 1 through 10. The visualization displays the current selection as an orange arrow and a label showing the selected range. The slider includes adjustable step size, slider size, and initial index via HTML inputs, with an "Apply" button to update the scale dynamically. The code relies on `d3.scaleBand`, `d3.brushX`, and SVG element manipulation to compute snapped positions and render the selection handle.

CChandrakantThakkarDigiCorp

84% match

Loading thumbnail…

D3.js Round Slider

This example shows a round slider built with D3.js, where a draggable handle moves along a circular track to represent a value. The visualization renders an SVG circle as the slider’s circumference and a small draggable dot that users can click and pull around the ring. The code uses D3’s `d3.drag` and `d3.event` to handle pointer interactions, calculating the handle’s position via trigonometric functions (`Math.acos`, `Math.sin`, `Math.cos`) based on its distance from the center. The slider’s state is stored in a simple data array, and the handle’s color changes from steelblue to red while dragging, as defined in the accompanying CSS.

PPhilippe Rivière

80% match

Loading thumbnail…

D3 Slider

A D3 slider demonstrates a draggable handle on a horizontal track, showing how a single numeric value can be changed through direct manipulation. The code uses an SVG line for the track and a circle for the handle, with the drag behavior updating the circle’s `cx` attribute based on the pointer’s x-coordinate. The handle’s position is clamped between the track’s endpoints using a ternary expression, and the `d3.behavior.drag` API handles the drag events. The example renders entirely with SVG, and the interaction logic is implemented in plain D3 without additional libraries.

CCurran Kelleher

80% match

Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Mmbostock

80% match

Loading thumbnail…

Slider test 1

A range slider, built with the d3-simple-slider library, selects an interval on a horizontal axis. The slider’s default value is set between 0.015 and 0.02, and its current selection is displayed as a formatted percentage range in a paragraph. A D3 v6 SVG visualization renders the control, with the slider’s fill color set to blue. The underlying data, drawn from a CSV file, is not used in the interaction.

Llarsboergo

79% match

Loading thumbnail…

D3 linear slider

This example shows a draggable linear slider rendered as an SVG triangle handle that moves along an axis. Dragging the handle updates a numeric value between 34 and 100, logged to the console via a callback. The slider is built using D3 v7's `scaleLinear` for positioning, `axisBottom` for tick marks, and `drag` for user interaction. The handle is drawn with `symbol` and `symbolTriangle`, while `slideScale.invert` converts the dragged position back into the data domain.

AAlpineStranger

77% match

Loading thumbnail…

D3 sliders

This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.

KKaustav Sen

77% match