Slider

import { Slider } from "@grassroot/ui-react";
 
const [value, setValue] = React.useState(6);
 
<Slider aria-label="Estimate" min={1} max={12} value={value} onChange={(e) => setValue(Number(e.target.value))} />

<script setup lang="ts">
import { ref } from "vue";
import { Slider } from "@grassroot/ui-vue";
 
const value = ref(6);
</script>
 
<template>
  <Slider
    v-model="value"
    aria-label="Estimate"
    :min="1"
    :max="12"
    @change="value = Number(e.target.value)"
  />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootSlider } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootSlider],
  template: `
    <grassroot-slider
      aria-label="Estimate"
      [min]="1"
      [max]="12"
      [value]="value()"
      (change)="value.set(Number(e.target.value))"
    />
  `,
})
export class ExampleComponent {
  readonly value = signal(6);
}

<script lang="ts">
  import { Slider } from "@grassroot/ui-svelte";
 
  let value = $state(6);
</script>
 
<Slider
  aria-label="Estimate"
  min={1}
  max={12}
  value={value}
  onChange={(e) => value = Number(e.target.value)}
/>

import { createSignal } from "solid-js";
import { Slider } from "@grassroot/ui-solid";
 
export function Example() {
  const [value, setValue] = createSignal(6);
 
  return (
    <>
      <Slider
        aria-label="Estimate"
        min={1}
        max={12}
        value={value()}
        onChange={(e) => setValue(Number(e.target.value))}
      />
    </>
  );
}