Drag Slider

100%

✓ Published0🌍 Public

Last edited Apr 10, 2017

Created on Sep 5, 2013

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.

AI-generated description

This slider is implemented using d3-drag.

Similar vizzes

Loading thumbnail…

Smooth Slider

A slider demonstrates smooth color interpolation between hues. Dragging the handle sets a target hue, and the background color transitions toward it with an exponential easing effect, creating a fluid visual response. The example uses D3.js v4 with a linear scale mapping degrees to pixel positions, a custom drag interaction via `d3.drag()`, and a timer-driven tween to animate the hue value. SVG elements include styled tracks, ticks, and a circular handle, while the background color updates via `d3.hsl()`.

Mmbostock

87% 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

85% 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

85% 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

80% match

Loading thumbnail…

Range Slider

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.

FFrissAnalytics

80% match

Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil

80% match

Loading thumbnail…

Blank Canvas

A slider controls the background hue of an SVG canvas. Dragging the handle updates the color in real time, with tick labels showing the degree value. The visualization uses d3.drag for interaction, d3.interpolate for a smooth intro animation, and d3.hsl to convert the slider value to a color. The code imports d3 via `import {} from 'd3'` and renders with SVG elements.

RRostyslav

79% 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

78% match