Slider — usage examples

Slider ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

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

<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

<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" />

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];
}

tsx

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" />;
}

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:

tsx

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

<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

<script>
  let sl;                  // component instance via bind:this
</script>

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

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Slider) sl!: Slider;   // or the viewChild() signal
  focusIt() { this.sl.focus(); }
  bumpIt() { this.sl.increment(); }
}

tsx

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();

// 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();

Slider — usage examples ​

Usage ​

Imperative handle ​

See also ​

Slider — usage examples

Usage

Imperative handle

See also