RangeSlider

const rangeSliderFixture = {
  id: "range-slider",
  min: 0,
  max: 500,
  step: 10,
  defaultValue: [120, 340] as [number, number],
  histogram: [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10],
  caption: "per-seat / month",
} as const;
 
import { RangeSlider } from "@grassroot/ui-react/advanced";
 
export default function RangeSliderDemo() {
  return (
    <div>
      <RangeSlider
        min={rangeSliderFixture.min}
        max={rangeSliderFixture.max}
        step={rangeSliderFixture.step}
        defaultValue={rangeSliderFixture.defaultValue}
        histogram={[...rangeSliderFixture.histogram]}
        caption={rangeSliderFixture.caption}
        format={String}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const rangeSliderFixture = {
  id: "range-slider",
  min: 0,
  max: 500,
  step: 10,
  defaultValue: [120, 340] as [number, number],
  histogram: [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10],
  caption: "per-seat / month",
} as const;
 
import { RangeSlider } from "@grassroot/ui-vue";
const value = ref<[number, number]>([...rangeSliderFixture.defaultValue]);
</script>
<template>
  <div>
    <RangeSlider
      v-model="value"
      :min="rangeSliderFixture.min"
      :max="rangeSliderFixture.max"
      :step="rangeSliderFixture.step"
      :histogram="[...rangeSliderFixture.histogram]"
      :format="String"
      :caption="rangeSliderFixture.caption"
    />
  </div>
</template>

import { Component } from "@angular/core";
const rangeSliderFixture = {
  id: "range-slider",
  min: 0,
  max: 500,
  step: 10,
  defaultValue: [120, 340] as [number, number],
  histogram: [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10],
  caption: "per-seat / month",
} as const;
 
import { GrassrootRangeSlider } from "@grassroot/ui-angular";
@Component({
  selector: "app-range-slider-demo",
  standalone: true,
  imports: [GrassrootRangeSlider],
  template: `<div>
    <grassroot-range-slider
      [min]="fixture.min"
      [max]="fixture.max"
      [step]="fixture.step"
      [histogram]="fixture.histogram"
      [value]="fixture.defaultValue"
      [format]="format"
      [caption]="fixture.caption"
    />
  </div>`,
})
export class RangeSliderDemoComponent {
  protected readonly fixture = rangeSliderFixture;
  protected readonly format = String;
}
export default RangeSliderDemoComponent;

<script lang="ts">
  const rangeSliderFixture = {
    id: "range-slider",
    min: 0,
    max: 500,
    step: 10,
    defaultValue: [120, 340] as [number, number],
    histogram: [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10],
    caption: "per-seat / month",
  } as const;
 
  import { RangeSlider } from "@grassroot/ui-svelte";
</script>
 
<div>
  <RangeSlider
    min={rangeSliderFixture.min}
    max={rangeSliderFixture.max}
    step={rangeSliderFixture.step}
    defaultValue={[...rangeSliderFixture.defaultValue]}
    histogram={[...rangeSliderFixture.histogram]}
    format={String}
    caption={rangeSliderFixture.caption}
  />
</div>

/** @jsxImportSource solid-js */
const rangeSliderFixture = {
  id: "range-slider",
  min: 0,
  max: 500,
  step: 10,
  defaultValue: [120, 340] as [number, number],
  histogram: [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10],
  caption: "per-seat / month",
} as const;
 
import { RangeSlider } from "@grassroot/ui-solid";
export default function RangeSliderDemo() {
  return (
    <div>
      <RangeSlider
        min={rangeSliderFixture.min}
        max={rangeSliderFixture.max}
        step={rangeSliderFixture.step}
        defaultValue={[...rangeSliderFixture.defaultValue]}
        histogram={[...rangeSliderFixture.histogram]}
        format={String}
        caption={rangeSliderFixture.caption}
      />
    </div>
  );
}