RangeSlider

import { RangeSlider } from "@grassroot/ui-react/advanced";
 
const histogram = [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10];
 
<RangeSlider
  min={0}
  max={500}
  step={10}
  histogram={histogram}
  defaultValue={[120, 340]}
  format={(n) => `${n}`}
  caption="per-seat / month"
/>

<script setup lang="ts">
import { RangeSlider } from "@grassroot/ui-vue";
 
const histogram = [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10];
</script>
 
<template>
  <RangeSlider
    :min="0"
    :max="500"
    :step="10"
    :histogram="histogram"
    :default-value="[120, 340]"
    :format="(n) => `${n}`"
    caption="per-seat / month"
  />
</template>

import { Component } from "@angular/core";
import { GrassrootRangeSlider } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootRangeSlider],
  template: `
    <grassroot-range-slider
      [min]="0"
      [max]="500"
      [step]="10"
      [histogram]="histogram"
      [defaultValue]="[120, 340]"
      [format]="(n) => \`\${n}\`"
      caption="per-seat / month"
    />
  `,
})
export class ExampleComponent {
  readonly histogram = [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10];
}

<script lang="ts">
  import { RangeSlider } from "@grassroot/ui-svelte";
 
  const histogram = [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10];
</script>
 
<RangeSlider
  min={0}
  max={500}
  step={10}
  histogram={histogram}
  defaultValue={[120, 340]}
  format={(n) => `${n}`}
  caption="per-seat / month"
/>

import { RangeSlider } from "@grassroot/ui-solid";
 
const histogram = [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10];
 
export function Example() {
  return (
    <>
      <RangeSlider
        min={0}
        max={500}
        step={10}
        histogram={histogram}
        defaultValue={[120, 340]}
        format={(n) => `${n}`}
        caption="per-seat / month"
      />
    </>
  );
}