Slider

Introduction

Slider sets type="range" and defaults to min 0, max 100, step 1. It reuses Field’s input render path with an or-slider class. .pips() adds data-pips="true" for tick marks in panel CSS/JS. Values dehydrate as numbers/strings from the range control.

Each variation below includes a detailed explanation, the fluent API to paste into your schema, and light/dark screenshots of the rendered control.

Basic slider

Default 0–100 volume-style control with Orbit label chrome.

Slider.make('volume')
    .label('Volume')
    .default(50)

Orbit Basic slider (light)

Orbit Basic slider (dark)

Custom range and step

.min_value(), .max_value(), and .step() configure the native range attributes for fractional or narrow scales.

Slider.make('rating')
    .label('Rating')
    .min_value(0)
    .max_value(5)
    .step(0.5)
    .default(3)

Orbit Custom range and step (light)

Orbit Custom range and step (dark)

Pips

.pips() marks the control for tick/pip rendering via data-pips. Visual ticks depend on panel styles.

Slider.make('progress')
    .label('Progress')
    .min_value(0)
    .max_value(100)
    .step(10)
    .pips()

Orbit Pips (light)

Orbit Pips (dark)

Live slider

.live() binds with live wire semantics so dependent fields update while dragging (host permitting).

Slider.make('opacity')
    .label('Opacity')
    .min_value(0)
    .max_value(1)
    .step(0.05)
    .live()

Orbit Live slider (light)

Orbit Live slider (dark)

Closures work on .label(), .helper_text(), .placeholder(), .visible(), .disabled(), and .required() where applicable — see Form closures.