D3 linear slider

100%

D3 linear slider

✓ Published1🌍 Public

Last edited Oct 29, 2022

Created on Oct 27, 2022

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.

AI-generated description

Linear slider using D3

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

MyDragSlider

The graphic displays a draggable slider that controls the background color of the SVG canvas, with a shaded track, tick marks, and a circular handle. Dragging the handle changes its horizontal position along a linear scale from 1990 to 2014, and the background hue updates to a corresponding HSL color. This example uses d3.v4, SVG elements, and the `d3.drag()` API to handle pointer interactions, while the slider’s track and ticks are built with standard D3 selection and scale methods.

QQ-Zhao

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…

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

80% match

Loading thumbnail…

Drag Slider

This interactive example demonstrates a slider for selecting a hue value from 0 to 180 degrees, dynamically updating the background color of the SVG canvas. The slider track is overlaid with an invisible, stroke-based capture area that uses the `d3.drag()` API to handle pointer events, converting mouse position to a data value via the inverted linear scale. Tick labels are generated using `x.ticks(10)`, and a white handle with a dark stroke marks the current selection. The visualization opens with a brief, animated transition that uses `d3.interpolate` to smoothly move from 0 to 70 degrees, showcasing the slider’s response.

SSpaceActuary

79% match

Loading thumbnail…

d3-simple-slider

This example demonstrates a variety of interactive slider configurations using the d3-simple-slider library, built on D3 v5. It showcases simple, stepped, time-based, filled, ranged, and vertical sliders, along with alternative handles and transitions, with each slider updating a displayed value. The page includes extended examples inspired by a New York Times article and a color picker, all rendered as SVG elements within a Bootstrap layout. The sliders are created using `d3.sliderBottom` and `d3.sliderTop` APIs, with options for tick formatting, step values, and fill colors, and respond to user input via the `onchange` event.

Ggotyou007

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

77% match