NWD Slider (Single/Range)

Key features 6

One Value or a Range

One element handles both: a single value, or a range whose two thumbs never collide.

Horizontal or Vertical

The same slider works upright or across, and the scale and label follow the orientation.

Any Scale You Need

Any range and any precision you need, with values that always land exactly on your step.

Complete Styling Control

Every part of the slider is yours to style, with enough control to match an existing design system.

Accessible Experience

Fully operable from the keyboard and announced to screen readers, with motion preferences respected.

Workflow Ready

Everything the input knows is available to your workflows, and every change is an event you can react to.

In detail

Single or Range

Single value or start and end of a range
Minimum, maximum, and step, including decimal steps
Minimum distance between the two thumbs
Horizontal or vertical track, with the minimum at the bottom when vertical
Default values that follow your data until the user interacts

Fully Customizable

20+ properties for complete visual and behavioral control
Value label never, while dragging, or always, with a prefix and a suffix of your own, such as $, kg or %
Tick marks, with a scale of either the minimum and maximum or a number under every tick
Track, fill, and thumb colors and sizes
Thumb shaped as a circle, a rounded square or a pill, by its length, thickness and roundness
Seamless integration with native Bubble styles while preserving a consistent appearance across browsers and matching your app design

Smooth User Experience

Drag with mouse, touch, or pen, or click anywhere on the track
Keyboard ready with arrows, Page Up, Page Down, Home, and End
Value changed only when the thumb is released
Screen reader ready, with an accessible label and description, and reduced motion support

Workflow Friendly

Exposed states for the value, the range start, and the range end
Initial value available to your workflows even while the element is hidden
Focus action that can be triggered from anywhere for full workflow control
Reset action with flexible behavior that integrates with native Bubble actions or custom workflows
Value changed event for seamless Bubble integration

Reliable & Production-Ready

Built with lightweight CSS and JavaScript for fast, reliable performance
Designed around practical use cases and real Bubble development needs
Tested in real-world applications before being released publicly
Created to extend Bubble with functionality and customization beyond what native Bubble elements typically offer

How to use 7

01
Insert the element on the page
Place NWD Slider wherever the value should be picked. It behaves like a native input: size it and position it with Bubble's own layout.
02
Choose single or range
In SLIDER > # General, set Mode. Single shows one thumb and publishes one value; range shows two and publishes a start and an end.
Minimum distance only applies in range mode. It is the smallest gap the two thumbs may have, in the slider's own units, and it keeps them from landing on the same value.
03
Choose the orientation
Orientation runs the track horizontally or vertically. In vertical the minimum sits at the bottom, the scale goes to the right of the track and the value label to its left.
A vertical slider needs an explicit height on the element. Fitting the height to content collapses it, because the element has no text of its own for Bubble to measure.
04
Set the scale
Minimum, Maximum and Step define what the user can pick. A decimal step such as 0.5 allows decimal values, and the number of decimals in the step is the number of decimals shown in every label.
05
Decide what the user reads
In # Labels and ticks, Value label chooses when the value appears next to the thumb: never, while dragging, or always. Value prefix and Value suffix wrap it, so it reads as $1,200 or 75 kg instead of a bare number.
06
Add tick marks if the scale needs them
Still in # Labels and ticks, Tick marks is the number of intervals drawn on the track, not the number of marks: 4 draws 5 marks counting both ends. Scale labels then chooses which numbers appear along it.
Scale labels is one choice and not two switches: either the minimum and the maximum, or a number under every tick, never both. The first and last tick always fall on the minimum and the maximum, so showing both would print the same two numbers in the same place.
The scale takes room of its own: roughly 20px of height below the track, or of width beside it when the slider is vertical. Leave the element space for it, or it gets cut off at the edge.
07
Read the result in your workflows
Use the exposed states to drive the rest of the page: value (single) for the single value, value (range start) and value (range end) for the two ends of a range, and the value changed event to react when the user lets go.

SLIDER 22

The step governs more than the increment. It snaps every value the user picks, it snaps the default value on load, and the number of decimals it carries is the number of decimals every label shows. Setting it to 0.10 instead of 0.1 changes nothing in the arithmetic and everything in how the numbers read.

General

Mode

Single picks one value; range picks a start and an end.

singleone thumb and one value. The value (range start) and value (range end) states repeat it, so you can switch modes later without rewriting workflows.
rangetwo thumbs, a start and an end, with the fill drawn between them.

defaultsingle

Orientation

Which way the track runs. In vertical the minimum sits at the bottom, the scale goes to the right of the track and the value label to its left. A vertical slider needs an explicit height on the element: fitting the height to content collapses it.

horizontalthe track runs left to right, with the minimum on the left. The scale sits under the track and the value label above the thumb.
verticalthe track runs bottom to top, with the minimum at the bottom, which is the convention for vertical sliders. The scale moves to the right of the track and the value label to the left of the thumb. The element needs an explicit height.

defaulthorizontal

Minimum

number

Lowest value of the slider.

default0

Maximum

number

Highest value of the slider.

default100

Step

number

Increment between values. Decimal steps (0.5, 0.1) allow decimal values.

default1

Minimum distance

number

Smallest gap between the two thumbs in range mode.

default0

This is measured in the slider's own units, not in pixels or in steps. With a scale of 0 to 100 and a minimum distance of 10, the two thumbs can never be closer than 10 points apart.

Labels and ticks

Value label

When the value is shown above the thumb.

neverthe value is never shown above the thumb. Use it when you print the value elsewhere from the exposed states.
while draggingthe value appears only during the interaction and disappears when the user lets go, keeping the form quiet at rest.
alwaysthe value stays above the thumb. It is also the only mode drawn in the editor canvas, since the other two need a drag.

defaultwhile dragging

Value prefix

text

Text shown before the value in the labels (for example $).

defaultno default

optional

Value suffix

text

Text shown after the value in the labels (for example kg or %).

defaultno default

optional

Value label bg color

color

Background color of the value label.

default#333333

Value label font color

color

Font color of the value label.

default#FFFFFF

Scale labels

Which numbers appear under the track. The two are exclusive because the first and last tick already fall on the minimum and the maximum, so showing both would print the same two numbers twice in the same place. Choosing none keeps the tick marks and removes only their text. The scale takes room of its own, about 20px below the track or beside it when the slider is vertical, which the element’s default size already allows for.

noneno numbers along the track. Tick marks, if you asked for them, are still drawn: this removes their text, not the marks.
min and max labelsonly the two ends, at the minimum and at the maximum.
tick labelsthe value under every tick mark, which already includes the minimum and the maximum at the ends. Needs Tick marks above 0 to show anything.

defaultnone

Tick marks

number

Number of intervals marked on the track. 0 for none.

default0

This is the number of intervals, not the number of marks. 4 divides the track in four and draws 5 marks, counting both ends. The marks are drawn evenly along the track and are independent of the step.

Tick color

color

Color of the tick marks.

default#CACACA

Track

Track height

number

Thickness of the track, in pixels.

default6

Track bg color

color

Color of the empty part of the track.

default#E4E4E4

Track fill color

color

Color of the selected part of the track.

default#4DBEFF

Thumb

Thumb length

number

How long the thumb is ALONG the track, in pixels. In a horizontal slider this is its width, in a vertical one its height, so the shape follows the orientation instead of lying on its side.

default20

Length and thickness are measured against the TRACK, not the screen. In a horizontal slider the length is the width, in a vertical one it is the height, so a thumb you shaped as a pill keeps its shape when you switch the orientation instead of lying on its side.

Thumb thickness

number

How thick the thumb is ACROSS the track, in pixels. In a horizontal slider this is its height, in a vertical one its width.

default20

Thumb roundness

number

Corner radius of the thumb, in pixels. Half of the smaller side, or more, gives fully round ends: 20 by 20 with 10 is a circle, 12 by 28 with 6 is a pill, and a small number is a rounded square.

default10

Half of the smaller side, or anything above it, gives fully round ends. 20 by 20 with a roundness of 10 is the circle the slider ships with, 12 by 28 with 6 is a pill, and a small number such as 4 is a rounded square.

Thumb bg color

color

Background color of the thumbs.

default#FFFFFF

Thumb border color

color

Border color of the thumbs.

default#4DBEFF

DEFAULT DATA 2

Default value

number

Value on load and on reset. In range mode, the start of the range.

defaultno default

optional

Default end value

number

End of the range on load and on reset (range mode).

defaultno default

optional

INPUT BEHAVIOR 4

Disabled state

This input is disabled?

yes/no

Disables the component, preventing any interaction.

defaultno

Input opacity (disabled)

number

Opacity applied to the slider when disabled, from 0 to 1. Track, thumbs, value labels and scale fade together.

default0.5

Focused state

Focus ring color

color

Color of the ring drawn around the thumb while it has focus. Empty derives the ring from Thumb border color.

defaultno default

optional

Thumb border color (focused)

color

Border color of the thumb while it has focus. Empty keeps Thumb border color.

defaultno default

optional

ACCESSIBILITY 2

Accessible label

text

Name read by screen readers. When empty, uses the placeholder or the visible label.

defaultno default

optional

Accessible description

text

Hint read by screen readers after the name. Empty for none.

defaultno default

optional

States 5

Values the element exposes for the rest of the page to read.

value (single)

number

Selected value in single mode. In range mode it mirrors value (range start), carrying the same number.

value (range start)

number

Start of the range in range mode. In single mode it mirrors value (single), carrying the same number.

value (range end)

number

End of the range in range mode. In single mode it mirrors value (single), carrying the same number.

is clickable

yes/no

True when the component is not disabled.

is focused

yes/no

True while one of the thumbs has keyboard focus.

Events 1

Where a workflow can start.

value changed

event

Triggered when a thumb is released or moved with the keyboard, and on reset.

Actions 3

What a workflow can tell the element to do.

Reset no params

Restores the default values.

Focus no params

Focuses the first thumb.

Set value 4 params

Writes a value into the slider from a workflow, applying the step, the limits and the minimum distance, and refreshes the exposed states.

Apply even when disabled?

yes/no

Yes applies the value even while the element is disabled. No makes the action do nothing in that state.

defaultno default

Value (single)

number

Value for the thumb in single mode. Empty leaves it where it is. Ignored while the slider is in range mode.

defaultno default

optional

Value (range start)

number

Value for the start thumb in range mode. Empty leaves it where it is. Ignored while the slider is in single mode.

defaultno default

optional

Value (range end)

number

Value for the end thumb in range mode. Empty leaves it where it is. Ignored while the slider is in single mode.

defaultno default

optional

FAQ 6

What is the difference between value (single), value (range start) and value (range end)?

Each name tells you which mode it is meant for. In range mode, value (range start) and value (range end) are the two ends, and value (single) mirrors the start so a workflow written for a single slider keeps working after you switch modes. In single mode all three carry the same number. None of them is ever empty.

When exactly does the value changed event fire?

When the user releases a thumb, when they move it with the keyboard, and on reset. It does not fire on every pixel of a drag, so a workflow attached to it runs once per choice rather than hundreds of times.

Can the slider use decimal values?

Yes. Set a decimal step, such as 0.5 or 0.1, and the slider accepts decimals. The number of decimals in the step also decides how many decimals the labels show, so a step of 0.10 reads as 1.20 and a step of 1 reads as 1.

Why does my default value move slightly when the page loads?

Because it is snapped to the step, which is the same rule that applies to everything the user picks. With a minimum of 0 and a step of 10, a default of 37 settles on 40. The editor canvas snaps it too, so what you position is what you get.

Does the value label show while the user drags?

That is the default, and it is one of three choices. Never hides it entirely, while dragging shows it only during the interaction, and always keeps it above the thumb. Only always is drawn in the editor canvas, because the other two depend on a drag that does not happen there.

Can the slider run vertically?

Yes. Orientation switches the track to vertical, with the minimum at the bottom, the scale to the right of the track and the value label to the left of the thumb. The keyboard behaves the same in both, and each thumb tells screen readers which way the track runs. The one thing to watch is the height: a vertical slider needs an explicit height on the element, because fitting the height to content leaves it with nothing to measure and collapses it.