Vertical slider

100%

Vertical slider

✓ Published0🌍 Public

Last edited Apr 13, 2021

Created on Apr 13, 2021

This example demonstrates a vertical slider widget built with D3 v5 and the d3-simple-slider library. It displays a percentage value (formatted to two decimal places) that users can adjust by dragging the slider handle along a vertical track. The slider is rendered as an SVG element inside a Bootstrap container, with tick marks and labels generated using d3.format and custom tick specifications. The code initializes the slider using d3.sliderLeft(), sets its min/max range from a predefined data array, and updates a paragraph element on each change event.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Fork of d3-simple-slider

This example demonstrates a slider component built with the d3-simple-slider library, rendered as SVG with animation support. It showcases various slider configurations, including simple, step-based, time-based, fill, range, and vertical orientations, plus extended features like alternative handles and transitions. The slider updates displayed values dynamically via the `onchange` event. The code integrates Bootstrap for layout and uses D3 v5 for DOM manipulation. Data is not explicitly sourced, though the slider’s range and tick formatting adapt to numeric, date, and percentage inputs.

Llimenzi

80% match

Loading thumbnail…

time slider

This example showcases various interactive slider configurations built with D3 v5 and the d3-simple-slider library. It demonstrates core functionalities like simple continuous sliders, step-based sliders for discrete values, and time-based sliders using the `d3.timeFormat` and `d3.timeScale` for date handling. Additional features include filled sliders, range selection, vertical orientation, customized handles, and smooth transitions. The visualization also presents practical applications, such as a New York Times-style slider and a color picker, all rendered as SVG elements with Bootstrap styling for layout.

Mmanoj-soft

78% match

Loading thumbnail…

d3-simple-slider

This example demonstrates four interactive slider configurations built with the d3-simple-slider library and D3 v4, each handling a different data type and scale. The sliders showcase value selection for percentages, discrete integer steps, time-based data using JavaScript `Date` objects formatted with `d3.timeFormat`, and dense value arrays with custom tick marks. The code renders each slider as an SVG element via `d3.sliderHorizontal()`, binding change events to update text displays in real time, and includes reset links that programmatically set slider values. The implementation highlights the library’s flexibility in adapting to varied input formats while maintaining a consistent, user-friendly interface.

AAlainRo

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

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

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

75% match

Loading thumbnail…

Fork of d3-simple-slider

This fork of d3-simple-slider demonstrates the basic and extended functionality of the slider component. It showcases six core configurations—simple, step, time, fill, range, and vertical—along with an alternative handle and a transition option. Each slider is paired with a live value display, updating on user interaction. The example also includes recreations of the New York Times rent-or-buy slider and a color picker, all rendered as interactive SVG elements using the d3.sliderBottom and related APIs.

AAdan Rodriguez

75% match