Slider / range

In review

Live · web

Single value: drag the thumb, or tab to it and use the arrows

Output volume48%

48%

0%100%

Stepped: snaps to ticks; the value bubble rides the thumb on hover / focus / drag

Render quality3 / 6

06

3

Range: two thumbs (min / max) that can't cross; each is its own labeled slider

Price band$20 to $70

20$70$

$0$100

Sampling: the real Local Engine knob ranges (Sampling.kt); value is mono, accent when set

Temperature1.00

1.00

Top-P (nucleus)1.00

1.00

Top-K40

40

Disabled: inert, still legible

Locked by policy60%

60%

Sizes: sm and md

Small

48%

Medium

48%

Track + fill + thumb are all var(--token). The track is a recessed well, the fill is the plain cyan accent, the thumb is a lifted disc (neutral shadow + catch-light, never a glow). Only transform / shadow / brightness move; no fill tweens. The island is live.

Code

TypeScriptKotlinSwift

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
import { NockerlSlider, NockerlRangeSlider } from '@dizyx/nockerl-react';

export function SamplingControls() {
  const [temp, setTemp] = useState(1.0);
  const [band, setBand] = useState({ low: 20, high: 70 });
  return (
    <>
      {/* Real Local Engine sampling ranges (Sampling.kt) */}
      <NockerlSlider label="Temperature" value={temp} onChange={setTemp} min={0.1} max={2.0} step={0.05} />
      <NockerlSlider label="Top-P (nucleus)" value={topP} onChange={setTopP} min={0} max={1} step={0.01} />

      {/* Stepped with tick marks */}
      <NockerlSlider label="Render quality" value={q} onChange={setQ} min={0} max={6} step={1} ticks />

      {/* Two-thumb range; thumbs can't cross */}
      <NockerlRangeSlider label="Price band" low={band.low} high={band.high}
        onChange={(low, high) => setBand({ low, high })} min={0} max={100} step={5} unit="$" />
    </>
  );
}

// Android: Jetpack Compose (canonical). androidx.compose.material3.Slider.
// Shipped in chat/ui/SamplingAdvancedSettings.kt for the per-session sampling knobs.
// `steps` is the count of stops BETWEEN the endpoints: ((max - min) / step) - 1.
Slider(
    value = temperature,                          // 1.0, the universal Qwen default
    onValueChange = { next -> temperature = snapToStep(next, spec) },
    valueRange = 0.1f..2.0f,                       // Temperature (Sampling.kt)
    steps = computeSliderSteps(spec),             // ((2.0 - 0.1) / 0.05) - 1 = 37
    enabled = enabled,
)

// Two-thumb range (Material RangeSlider), designed here; not yet shipped in-app.
RangeSlider(
    value = low..high,
    onValueChange = { range -> low = range.start; high = range.endInclusive },
    valueRange = 0f..100f,
    steps = 19,                                    // ((100 - 0) / 5) - 1
)

// macOS: SwiftUI, from the NockerlDesign SwiftPM package. `NockerlSlider` WRAPS the
// native `Slider` (macOS pointer feel, keyboard/VoiceOver come from the system) and
// brands it: cyan `accentPrimary` tint + a persistent, REQUIRED Nockerl-typography
// label (never placeholder-as-label, law §14). The label is the first argument.
import NockerlDesign

// Continuous by default; pass `step:` for a stepped slider. Real Local Engine sampling
// range (Sampling.kt): Temperature 0.1 to 2.0 step 0.05.
NockerlSlider("Temperature", value: $temperature, in: 0.1...2.0, step: 0.05)

// Stepped slider with optional end captions (plain strings, not view builders).
NockerlSlider(
    "Render quality",
    value: $quality,
    in: 0...6,
    step: 1,
    minimumLabel: "0",
    maximumLabel: "6"
)

// Disable via the standard SwiftUI path.
NockerlSlider("Top-P (nucleus)", value: $topP, in: 0...1, step: 0.01)
    .disabled(!enabled)

// Two-thumb range: SwiftUI has no native range Slider, so this page carries it as a
// documented follow-up rather than an API (compose two bound thumbs over one track).

Parameters

TypeScriptKotlinSwift

Prop	Type	Default	Description
value *	number	n/a
onChange *	(v: number) => void	n/a
min	number	0
max	number	100
step	number	1
unit	string	''
label *	string	n/a
size	NockerlSliderSize	'md'
disabled	boolean	false
ticks	boolean	false	Render tick marks + min/max tick labels under the lane (stepped slider).

Also accepts the native <div> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.

NockerlRangeSlider swaps value for low / high and takes onChange={(low, high) => …}; the two thumbs are bound so they can never cross. It takes a subset of the props above (low, high, onChange, min, max, step, unit, label, size), so it accepts neither disabled nor ticks.

Parameter	Type	Default	Description
value *	Float	n/a	Current value. RangeSlider takes a ClosedFloatingPointRange<Float> instead.
onValueChange *	(Float) -> Unit	n/a	Continuous callback. The app snaps via snapToStep before storing.
valueRange	ClosedFloatingPointRange<Float>	0f..1f	Min/max, e.g. 0.1f..2.0f for Temperature (Sampling.kt).
steps	Int	0	Stops BETWEEN the endpoints: ((max - min) / step) - 1. 0 = continuous.
enabled	Boolean	true	When false, the track + thumb dim and ignore input.
colors	SliderColors	SliderDefaults.colors()	Defaults to the theme primary (= brand cyan) for the active track + thumb.
modifier	Modifier	Modifier	External modifier; pass Modifier.fillMaxWidth() for a full-width row.

NockerlSlider wraps the native Slider over a Binding<Double> and snaps to step. The label is required (persistent above the track + the a11y name). State (isEnabled, focus) comes from the environment via .disabled(_:), not a parameter. Unavailable on tvOS (SwiftUI ships no Slider there).

Parameter	Type	Default	Description
label *	String	n/a	First positional arg: the persistent label above the track and the a11y name. Empty is a runtime assert (placeholder-as-label banned, law §14).
value *	Binding<Double>	n/a	Two-way binding to the value.
in	ClosedRange<Double>	0...1	Bounds, e.g. 0.1...2.0 for Temperature.
step	Double?	nil	Snap granularity. nil = continuous.
minimumLabel	String?	nil	Optional caption at the track start (e.g. "0.1").
maximumLabel	String?	nil	Optional caption at the track end (e.g. "2.0").
.disabled(_:)	ViewModifier	n/a	Inert + dimmed; the standard SwiftUI disable path.

Cross-platform drift (tracked for reconciliation)

The single-thumb slider has a settled shape on every platform: the Swift tab documents the NockerlSlider wrapper from NockerlDesign, and the Kotlin tab the Material Slider used for the sampling knobs. The two-thumb range is where the platforms still diverge.

• Range slider: the two-thumb range is the least settled surface on this page. The Kotlin tab composes Material’s RangeSlider for the shape rather than mirroring a screen, and the Swift tab carries it as a follow-up (SwiftUI has no native range Slider). The value bubble and explicit tick marks are also designed originally here.
• Swift look: NockerlSlider wraps the native Slider and tints it cyan (accentPrimary) with a persistent Nockerl label; the recessed-well / lifted catch-light disc treatment is still the target the platforms should converge on.
• Temperature range: the real SAMPLING_KNOB_SPECS (Sampling.kt) uses 0.1 to 2.0 step 0.05, not the rounder “0 to 2 step 0.1”; the demo + code use the shipped values.
• Look: Android uses Material’s default thumb/track; the recessed well + lifted catch-light disc is the Nockerl treatment the platforms should converge on.