Slider

const sliderFixture = {
  id: "slider",
  label: "Estimate",
  min: 1,
  max: 12,
  step: 1,
  defaultValue: 6,
} as const;
 
import { Slider } from "@grassroot/ui-react";
 
export default function SliderDemo() {
  return (
    <div>
      <Slider
        aria-label={sliderFixture.label}
        min={sliderFixture.min}
        max={sliderFixture.max}
        step={sliderFixture.step}
        defaultValue={sliderFixture.defaultValue}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const sliderFixture = {
  id: "slider",
  label: "Estimate",
  min: 1,
  max: 12,
  step: 1,
  defaultValue: 6,
} as const;
 
import { Slider } from "@grassroot/ui-vue";
const value = ref(sliderFixture.defaultValue);
</script>
<template>
  <div>
    <Slider
      v-model="value"
      :aria-label="sliderFixture.label"
      :min="sliderFixture.min"
      :max="sliderFixture.max"
      :step="sliderFixture.step"
    />
  </div>
</template>

import { Component } from "@angular/core";
const sliderFixture = {
  id: "slider",
  label: "Estimate",
  min: 1,
  max: 12,
  step: 1,
  defaultValue: 6,
} as const;
 
import { GrassrootSlider } from "@grassroot/ui-angular";
@Component({
  selector: "app-slider-demo",
  standalone: true,
  imports: [GrassrootSlider],
  template: `<div>
    <grassroot-slider
      [aria-label]="fixture.label"
      [min]="fixture.min"
      [max]="fixture.max"
      [step]="fixture.step"
      [value]="fixture.defaultValue"
    />
  </div>`,
})
export class SliderDemoComponent {
  protected readonly fixture = sliderFixture;
}
export default SliderDemoComponent;

<script lang="ts">
  const sliderFixture = {
    id: "slider",
    label: "Estimate",
    min: 1,
    max: 12,
    step: 1,
    defaultValue: 6,
  } as const;
 
  import { Slider } from "@grassroot/ui-svelte";
  let value = $state(sliderFixture.defaultValue);
</script>
 
<div>
  <Slider
    aria-label={sliderFixture.label}
    min={sliderFixture.min}
    max={sliderFixture.max}
    step={sliderFixture.step}
    bind:value
  />
</div>

/** @jsxImportSource solid-js */
const sliderFixture = {
  id: "slider",
  label: "Estimate",
  min: 1,
  max: 12,
  step: 1,
  defaultValue: 6,
} as const;
 
import { Slider } from "@grassroot/ui-solid";
export default function SliderDemo() {
  return (
    <div>
      <Slider
        aria-label={sliderFixture.label}
        min={sliderFixture.min}
        max={sliderFixture.max}
        step={sliderFixture.step}
        value={sliderFixture.defaultValue}
      />
    </div>
  );
}