Slider · Starbase

Playground

A range control with a chunky pixel thumb. It wraps a native <input type="range">, so keyboard, touch and screen readers work out of the box. It exposes a numeric value property for data-bind.

Examples

Basic

<div style="display: grid; gap: 20px; inline-size: min(100%, 22rem)">
  <sb-slider label="Thrust" value="72" unit="%"></sb-slider>
  <sb-slider label="Heading" min="-180" max="180" value="30" unit="°" ticks></sb-slider>
  <sb-slider label="Precision" min="0" max="1" step="0.01" value="0.5"></sb-slider>
</div>

Steer anything with signals

Declare a signal, bind the slider to it, and drive other elements' attributes with data-attr. Nothing goes to the server: signals that start with _ stay in the browser.

<div data-signals:_size="48" style="display: grid; gap: 16px; inline-size: min(100%, 22rem)">
  <sb-slider label="Size" min="16" max="96" unit="px" data-bind:_size__prop.value></sb-slider>
  <img src="/art/info.svg" alt="" data-attr:width="$_size" data-attr:height="$_size" style="image-rendering: pixelated">
</div>

When the driven element is a component inside a server-rendered region, add data-preserve-attr for those attributes. Then a server morph won't reset them:

<sb-gauge data-attr:value="$_fuel" data-preserve-attr="value"></sb-gauge>

Accessibility

The native range input provides the role, value and keyboard support (arrow keys, Page Up/Down, Home/End). Give it a label; without one it is announced as "Value".

Installation

Add Datastar with Rocket and the Starbase autoloader once per page, then use the tag. The autoloader imports each component the first time its tag appears, including tags added later by a Datastar morph.

<!-- Once per page: Datastar with Rocket, and the Starbase autoloader.
     It loads every <sb-…> component the first time its tag appears. -->
<script type="importmap">
  { "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" } }
</script>
<script type="module" src="https://rocket.libretto.ch/c/autoloader.js"></script>
<!-- Optional, no flash of undefined elements: class="sb-cloak" on <html>, and -->
<style>.sb-cloak :not(:defined) { visibility: hidden }</style>

<sb-slider label="Thrust" value="72" unit="%" style="inline-size: 13rem"></sb-slider>

<!-- Or skip the autoloader and load just this component: -->
<!-- <script type="module" src="https://rocket.libretto.ch/c/slider/slider.js"></script> -->

API reference

Props

Attribute	Type	Default	Description
`value`	number	`0`	Initial value. Read the live value from the value property.
`min`	number	`0`	Minimum.
`max`	number	`100`	Maximum.
`step`	number	`1`	Step size (0 for continuous).
`label`	string	`""`	Visible label.
`unit`	string	`""`	Suffix after the shown value, e.g. "°" or "%".
`show-value`	boolean	`true`	Show the current value next to the label.
`ticks`	boolean	`false`	Show min and max below the track.
`disabled`	boolean	`false`	Disable interaction.

Events

Name	Description
`input`	While dragging (native, re-targeted to the host).
`change`	When the value is committed.
`sb-change`	When the value is committed. detail: { value }.