Slider | GistUI

Preview

Loading preview…

$seats = 12
root = Stack(Slider("seats", "Seats", min:1, max:100, bind:$seats, unit:" seats"), "Monthly cost: **" + @fmt($seats * 29, "$") + "**")

bind:$seats keeps the state variable in step with the slider, so the text below updates as it moves.

Signature

This is the line a model reads in the system prompt.

Slider(name, label, min:num, max:num, step:num, value:num, unit:str, bind:$var, hint:str)

Group: Forms
Children: No
Positional arguments: name, label (a trailing ? means it may be left out)

Prop	Type	How to write it	Notes
`name`	string	positional, required
`label`	string	positional, required
`min`	number	named: `min:…`
`max`	number	named: `max:…`
`step`	number	named: `step:…`
`value`	number	named: `value:…`
`unit`	string	named: `unit:…`	shown after the value, e.g. “%”
`bind`	`$state` variable	`bind:$name`	two-way binding to a $variable
`hint`	string	named: `hint:…`

Keep the name and schema, swap what is drawn. The prompt and the model’s output do not change.

import { ui } from "@gistui/react/ui";

const lib = ui.extend({ Slider: MySlider });
<GistUI library={lib} stream={response.body} />;

<GistUI :source="answer" :components="{ Slider: MySlider }" />

<GistUI source={answer} components={{ Slider: MySlider }} />

<GistUI source={answer()} components={{ Slider: MySlider }} />

import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Slider: (ctx) => ({ el: myElement(ctx) }) });

See Custom components for the full contract. Style hook: [data-gistui="Slider"].