Slider — usage examples

Solid-only debut

Today only @rozie-ui/slider-solid is on npm; the other framework packages are in dogfooding.

Slider is designed to ship as six pre-compiled, per-framework packages from a single .rozie source. Today only the Solid package is on npm — install that one for real use. The other tabs below show the same idiomatic consumption code against each target's workspace build, for review ahead of their own debut.

Usage

React

// @rozie-ui/slider-react is not yet published to npm — this shows the workspace build, for review only.
import { useState } from 'react';
import { Slider } from '@rozie-ui/slider-react';

export function Demo() {
  const [value, setValue] = useState<number>(50);
  return (
    <Slider value={value} onValueChange={setValue} min={0} max={100} step={1} ariaLabel="Volume" showValue />
  );
}

// Range mode: bind a sorted [lo, hi] tuple.
export function RangeDemo() {
  const [range, setRange] = useState<[number, number]>([20, 80]);
  return <Slider value={range} onValueChange={setRange} range min={0} max={100} ariaLabel="Price range" />;
}

Vue

<!-- @rozie-ui/slider-vue is not yet published to npm — this shows the workspace build, for review only. -->
<script setup lang="ts">
import { ref } from 'vue';
import Slider from '@rozie-ui/slider-vue';

const value = ref<number>(50);
const range = ref<[number, number]>([20, 80]);
</script>

<template>
  <Slider v-model:value="value" :min="0" :max="100" :step="1" aria-label="Volume" show-value />

  <!-- Range mode -->
  <Slider v-model:value="range" range :min="0" :max="100" aria-label="Price range" />
</template>

Svelte

<!-- @rozie-ui/slider-svelte is not yet published to npm — this shows the workspace build, for review only. -->
<script lang="ts">
  import Slider from '@rozie-ui/slider-svelte';

  let value = $state<number>(50);
  let range = $state<[number, number]>([20, 80]);
</script>

<Slider bind:value min={0} max={100} step={1} ariaLabel="Volume" showValue />

<!-- Range mode -->
<Slider bind:value={range} range min={0} max={100} ariaLabel="Price range" />

Angular

// @rozie-ui/slider-angular is not yet published to npm — this shows the workspace build, for review only.
import { Component } from '@angular/core';
import { Slider } from '@rozie-ui/slider-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Slider],
  template: `
    <Slider [(value)]="value" [min]="0" [max]="100" [step]="1" ariaLabel="Volume" [showValue]="true" />

    <!-- Range mode: value is a sorted [lo, hi] tuple -->
    <Slider [(value)]="range" [range]="true" [min]="0" [max]="100" ariaLabel="Price range" />
  `,
})
export class DemoComponent {
  value = 50;
  range: [number, number] = [20, 80];
}

Solid

import { createSignal } from 'solid-js';
import { Slider } from '@rozie-ui/slider-solid';

export function Demo() {
  const [value, setValue] = createSignal<number>(50);
  return <Slider value={value()} onValueChange={setValue} min={0} max={100} step={1} ariaLabel="Volume" showValue />;
}

// Range mode: bind a sorted [lo, hi] tuple.
export function RangeDemo() {
  const [range, setRange] = createSignal<[number, number]>([20, 80]);
  return <Slider value={range()} onValueChange={setRange} range min={0} max={100} ariaLabel="Price range" />;
}

// Custom tick labels + bubble content via the scoped-slot render props —
// markSlot receives { value, label, position } per mark, bubbleSlot { value }.
export function MarksDemo() {
  const [value, setValue] = createSignal<number>(25);
  return (
    <Slider
      value={value()}
      onValueChange={setValue}
      min={0}
      max={100}
      marks={[0, 25, 50, 75, 100]}
      ariaLabel="Volume"
      showValue
      markSlot={(m) => <strong>{m.label}</strong>}
      bubbleSlot={(b) => <>{b.value}%</>}
    />
  );
}

Lit

// @rozie-ui/slider-lit is not yet published to npm — this shows the workspace build, for review only.
import '@rozie-ui/slider-lit';

// <rozie-slider> is a custom element. Bind `value`/`min`/`max` as properties
// and listen for the `value-change` event to receive the new value (a number
// in single mode, a sorted [lo, hi] array in range mode).
const el = document.querySelector('rozie-slider');
el.min = 0;
el.max = 100;
el.value = 50;
el.addEventListener('value-change', (e) => {
  el.value = e.detail;
});

Imperative handle

Beyond props and events, Slider exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

React

// @rozie-ui/slider-react is not yet published to npm — this shows the workspace build, for review only.
import { useRef } from 'react';
import { Slider, type SliderHandle } from '@rozie-ui/slider-react';

const sl = useRef<SliderHandle>(null);
// <Slider ref={sl} ... />
sl.current?.focus();
sl.current?.increment();

Vue

<!-- @rozie-ui/slider-vue is not yet published to npm — this shows the workspace build, for review only. -->
<script setup>
import { ref } from 'vue';
const sl = ref();          // template ref
</script>

<template>
  <Slider ref="sl" v-model:value="value" />
  <button @click="sl.increment()">+</button>
</template>

Svelte

<!-- @rozie-ui/slider-svelte is not yet published to npm — this shows the workspace build, for review only. -->
<script>
  let sl;                  // component instance via bind:this
</script>

<Slider bind:this={sl} bind:value />
<button onclick={() => sl.increment()}>+</button>

Angular

// @rozie-ui/slider-angular is not yet published to npm — this shows the workspace build, for review only.
@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Slider) sl!: Slider;   // or the viewChild() signal
  focusIt() { this.sl.focus(); }
  bumpIt() { this.sl.increment(); }
}

Solid

import { Slider, type SliderHandle } from '@rozie-ui/slider-solid';

let handle: SliderHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Slider ref={(h) => (handle = h)} value={value()} />;
handle?.increment();

Lit

// @rozie-ui/slider-lit is not yet published to npm — this shows the workspace build, for review only.
// The custom element IS the handle — exposed methods are public element
// methods. `focus()` here DELIBERATELY overrides the inherited
// HTMLElement.focus (it focuses the native range thumb).
const el = document.querySelector('rozie-slider');
el.focus();
el.increment();

See also

• Slider — showcase & API — the full prop / event / slot / handle reference, theming, and accessibility.
• Slider theming — the complete customizable-token table.
• Slider comparison — how it stacks up against the per-framework libraries.
• Slider — live demo — the real package running in the page, plus the one .rozie source and all six generated outputs.