Input Range

A styled wrapper around <input type="range"> that shares the feedback, size, and background vocabulary of the rest of the form surface. The track fills proportionally with the current value so users see the selected amount at a glance.

Feedback

Apply semantic feedback colors to tint the filled track and thumb — useful for tying a slider to a validation state or a themed control group.

AstroReactSvelteVue

PreviewCode

---
import InputRange from "../InputRange.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <InputRange feedback="neutral" value={40} min={0} max={100} fullWidth />
  <InputRange feedback="primary" value={55} min={0} max={100} fullWidth />
  <InputRange feedback="success" value={70} min={0} max={100} fullWidth />
  <InputRange feedback="danger" value={25} min={0} max={100} fullWidth />
  <InputRange feedback="warning" value={85} min={0} max={100} fullWidth />
</div>

import { InputRange } from "../InputRange";
import { stack } from "@pindoba/styled-system/patterns";

export default function FeedbackDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <InputRange
        feedback="neutral"
        defaultValue={40}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        feedback="primary"
        defaultValue={55}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        feedback="success"
        defaultValue={70}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        feedback="danger"
        defaultValue={25}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        feedback="warning"
        defaultValue={85}
        min={0}
        max={100}
        fullWidth
      />
    </div>
  );
}

<script lang="ts">
  import InputRange from "../input-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <InputRange feedback="neutral" value={40} min={0} max={100} fullWidth />
  <InputRange feedback="primary" value={55} min={0} max={100} fullWidth />
  <InputRange feedback="success" value={70} min={0} max={100} fullWidth />
  <InputRange feedback="danger" value={25} min={0} max={100} fullWidth />
  <InputRange feedback="warning" value={85} min={0} max={100} fullWidth />
</div>

<script setup lang="ts">
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
</script>

<template>
  <div :class="col">
    <InputRange feedback="neutral" :value="40" :min="0" :max="100" fullWidth />
    <InputRange feedback="primary" :value="55" :min="0" :max="100" fullWidth />
    <InputRange feedback="success" :value="70" :min="0" :max="100" fullWidth />
    <InputRange feedback="danger" :value="25" :min="0" :max="100" fullWidth />
    <InputRange feedback="warning" :value="85" :min="0" :max="100" fullWidth />
  </div>
</template>

Size

Four sizes scale the track height and thumb diameter together so the control stays proportional inside tight toolbars or prominent settings panels.

AstroReactSvelteVue

PreviewCode

---
import InputRange from "../InputRange.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <InputRange size="xs" value={20} min={0} max={100} fullWidth />
  <InputRange size="sm" value={40} min={0} max={100} fullWidth />
  <InputRange size="md" value={60} min={0} max={100} fullWidth />
  <InputRange size="lg" value={80} min={0} max={100} fullWidth />
</div>

import { InputRange } from "../InputRange";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <InputRange size="xs" defaultValue={20} min={0} max={100} fullWidth />
      <InputRange size="sm" defaultValue={40} min={0} max={100} fullWidth />
      <InputRange size="md" defaultValue={60} min={0} max={100} fullWidth />
      <InputRange size="lg" defaultValue={80} min={0} max={100} fullWidth />
    </div>
  );
}

<script lang="ts">
  import InputRange from "../input-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <InputRange size="xs" value={20} min={0} max={100} fullWidth />
  <InputRange size="sm" value={40} min={0} max={100} fullWidth />
  <InputRange size="md" value={60} min={0} max={100} fullWidth />
  <InputRange size="lg" value={80} min={0} max={100} fullWidth />
</div>

<script setup lang="ts">
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
</script>

<template>
  <div :class="col">
    <InputRange size="xs" :value="20" :min="0" :max="100" fullWidth />
    <InputRange size="sm" :value="40" :min="0" :max="100" fullWidth />
    <InputRange size="md" :value="60" :min="0" :max="100" fullWidth />
    <InputRange size="lg" :value="80" :min="0" :max="100" fullWidth />
  </div>
</template>

Prefix & Suffix

Use fieldPrefix and fieldSuffix to add labels or a live value readout alongside the track. The native <input> still owns the value — bind it to display the current number. Use labelPosition to place the labels inline with the track (default), or stacked on top or bottom.

AstroReactSvelteVue

PreviewCode

Volume

35%

Brightness

72%

100

---
import InputRange from "../InputRange.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---

<div class={stack({ gap: "lg", direction: "column" })}>
  <InputRange value={35} min={0} max={100} fullWidth>
    <span slot="fieldPrefix" class={css({ whiteSpace: "nowrap" })}>
      Volume
    </span>
    <span
      slot="fieldSuffix"
      class={css({ minWidth: "3ch", textAlign: "right" })}
    >
      35%
    </span>
  </InputRange>

  <InputRange value={72} min={0} max={100} fullWidth labelPosition="top">
    <span slot="fieldPrefix" class={css({ whiteSpace: "nowrap" })}>
      Brightness
    </span>
    <span slot="fieldSuffix" class={css({ textAlign: "right" })}>72%</span>
  </InputRange>

  <InputRange value={60} min={0} max={100} fullWidth labelPosition="bottom">
    <span slot="fieldPrefix" class={css({ whiteSpace: "nowrap" })}> 0 </span>
    <span slot="fieldSuffix" class={css({ textAlign: "right" })}>100</span>
  </InputRange>
</div>

Volume

35%

Brightness

72%

100

import { useState } from "react";
import { InputRange } from "../InputRange";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function PrefixSuffixDemo() {
  const [volume, setVolume] = useState(35);
  const [brightness, setBrightness] = useState(72);
  const [range, setRange] = useState(60);

  return (
    <div className={stack({ gap: "lg", direction: "column" })}>
      <InputRange
        value={volume}
        onChange={(event) => setVolume(Number(event.currentTarget.value))}
        min={0}
        max={100}
        fullWidth
        fieldPrefix={
          <span className={css({ whiteSpace: "nowrap" })}>Volume</span>
        }
        fieldSuffix={
          <span className={css({ minWidth: "3ch", textAlign: "right" })}>
            {volume}%
          </span>
        }
      />

      <InputRange
        value={brightness}
        onChange={(event) => setBrightness(Number(event.currentTarget.value))}
        min={0}
        max={100}
        step={5}
        fullWidth
        labelPosition="top"
        fieldPrefix={<span>Brightness</span>}
        fieldSuffix={
          <span className={css({ textAlign: "right" })}>{brightness}%</span>
        }
      />

      <InputRange
        value={range}
        onChange={(event) => setRange(Number(event.currentTarget.value))}
        min={0}
        max={100}
        fullWidth
        labelPosition="bottom"
        fieldPrefix={<span>0</span>}
        fieldSuffix={<span className={css({ textAlign: "right" })}>100</span>}
      />
    </div>
  );
}

Volume

35%

Brightness

72%

100

<script lang="ts">
  import InputRange from "../input-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let volume = $state(35);
  let brightness = $state(72);
  let range = $state(60);
</script>

<div class={stack({ gap: "lg", direction: "column" })}>
  <InputRange bind:value={volume} min={0} max={100} fullWidth>
    {#snippet fieldPrefix()}
      <span class={css({ whiteSpace: "nowrap" })}>Volume</span>
    {/snippet}
    {#snippet fieldSuffix()}
      <span class={css({ minWidth: "3ch", textAlign: "right" })}>
        {volume}%
      </span>
    {/snippet}
  </InputRange>

  <InputRange
    bind:value={brightness}
    min={0}
    max={100}
    step={5}
    fullWidth
    labelPosition="top"
  >
    {#snippet fieldPrefix()}
      <span>Brightness</span>
    {/snippet}
    {#snippet fieldSuffix()}
      <span class={css({ textAlign: "right" })}>{brightness}%</span>
    {/snippet}
  </InputRange>

  <InputRange
    bind:value={range}
    min={0}
    max={100}
    fullWidth
    labelPosition="bottom"
  >
    {#snippet fieldPrefix()}
      <span>0</span>
    {/snippet}
    {#snippet fieldSuffix()}
      <span class={css({ textAlign: "right" })}>100</span>
    {/snippet}
  </InputRange>
</div>

Volume

35%

Brightness

72%

100

<script setup lang="ts">
import { ref, type Ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
const col = stack({ gap: "lg", direction: "column" });
const nowrap = css({ whiteSpace: "nowrap" });
const rightWide = css({ minWidth: "3ch", textAlign: "right" });
const right = css({ textAlign: "right" });
const volume = ref(35);
const brightness = ref(72);
const range = ref(60);
// Build the handlers in script scope: in the template, refs auto-unwrap to
// `number`, so `set(volume)` there would pass a number, not the ref.
const set = (r: Ref<number>) => (e: Event) =>
  (r.value = Number((e.target as HTMLInputElement).value));
const onVolume = set(volume);
const onBrightness = set(brightness);
const onRange = set(range);
</script>

<template>
  <div :class="col">
    <InputRange :value="volume" :min="0" :max="100" fullWidth @input="onVolume">
      <template #fieldPrefix><span :class="nowrap">Volume</span></template>
      <template #fieldSuffix
        ><span :class="rightWide">{{ volume }}%</span></template
      >
    </InputRange>
    <InputRange
      :value="brightness"
      :min="0"
      :max="100"
      :step="5"
      fullWidth
      labelPosition="top"
      @input="onBrightness"
    >
      <template #fieldPrefix><span>Brightness</span></template>
      <template #fieldSuffix
        ><span :class="right">{{ brightness }}%</span></template
      >
    </InputRange>
    <InputRange
      :value="range"
      :min="0"
      :max="100"
      fullWidth
      labelPosition="bottom"
      @input="onRange"
    >
      <template #fieldPrefix><span>0</span></template>
      <template #fieldSuffix><span :class="right">100</span></template>
    </InputRange>
  </div>
</template>

Dual Range

Provide valueStart and valueEnd (instead of a single value) to select an interval with two thumbs — ideal for price ranges or bounds. Set minGap to keep a minimum distance between the thumbs. Each thumb is a real native <input type="range">, so keyboard and assistive-tech support come for free.

AstroReactSvelteVue

PreviewCode

---
import InputRange from "../InputRange.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "lg", direction: "column" })}
  style="width: 28rem; max-width: 100%"
>
  <InputRange valueStart={200} valueEnd={750} min={0} max={1000} fullWidth />
  <InputRange
    valueStart={30}
    valueEnd={60}
    min={0}
    max={100}
    minGap={10}
    feedback="success"
    showValue="always"
    fullWidth
  />
</div>

$200

$750

import { useState } from "react";
import { InputRange } from "../InputRange";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function DualDemo() {
  const [priceStart, setPriceStart] = useState(200);
  const [priceEnd, setPriceEnd] = useState(750);
  const [boundStart, setBoundStart] = useState(30);
  const [boundEnd, setBoundEnd] = useState(60);

  return (
    <div
      className={stack({ gap: "lg", direction: "column" })}
      style={{ width: "28rem", maxWidth: "100%" }}
    >
      <InputRange
        valueStart={priceStart}
        valueEnd={priceEnd}
        onValueStartChange={setPriceStart}
        onValueEndChange={setPriceEnd}
        min={0}
        max={1000}
        fullWidth
        fieldPrefix={
          <span className={css({ whiteSpace: "nowrap" })}>${priceStart}</span>
        }
        fieldSuffix={
          <span className={css({ minWidth: "4ch", textAlign: "right" })}>
            ${priceEnd}
          </span>
        }
      />

      <InputRange
        valueStart={boundStart}
        valueEnd={boundEnd}
        onValueStartChange={setBoundStart}
        onValueEndChange={setBoundEnd}
        min={0}
        max={100}
        minGap={10}
        feedback="success"
        showValue="always"
        fullWidth
      />
    </div>
  );
}

$200

$750

<script lang="ts">
  import InputRange from "../input-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let priceStart = $state(200);
  let priceEnd = $state(750);
  let boundStart = $state(30);
  let boundEnd = $state(60);
</script>

<div
  class={stack({ gap: "lg", direction: "column" })}
  style="width: 28rem; max-width: 100%"
>
  <InputRange
    bind:valueStart={priceStart}
    bind:valueEnd={priceEnd}
    min={0}
    max={1000}
    fullWidth
  >
    {#snippet fieldPrefix()}
      <span class={css({ whiteSpace: "nowrap" })}>${priceStart}</span>
    {/snippet}
    {#snippet fieldSuffix()}
      <span class={css({ minWidth: "4ch", textAlign: "right" })}>
        ${priceEnd}
      </span>
    {/snippet}
  </InputRange>

  <InputRange
    bind:valueStart={boundStart}
    bind:valueEnd={boundEnd}
    min={0}
    max={100}
    minGap={10}
    feedback="success"
    showValue="always"
    fullWidth
  />
</div>

$200

$750

<script setup lang="ts">
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const col = stack({ gap: "lg", direction: "column" });
const wrapStyle = { width: "28rem", maxWidth: "100%" };
const nowrap = css({ whiteSpace: "nowrap" });
const rightWide = css({ minWidth: "4ch", textAlign: "right" });

const priceStart = ref(200);
const priceEnd = ref(750);
const boundStart = ref(30);
const boundEnd = ref(60);
</script>

<template>
  <div :class="col" :style="wrapStyle">
    <InputRange
      :valueStart="priceStart"
      :valueEnd="priceEnd"
      :min="0"
      :max="1000"
      fullWidth
      @value-start-change="(v: number) => (priceStart = v)"
      @value-end-change="(v: number) => (priceEnd = v)"
    >
      <template #fieldPrefix
        ><span :class="nowrap">${{ priceStart }}</span></template
      >
      <template #fieldSuffix
        ><span :class="rightWide">${{ priceEnd }}</span></template
      >
    </InputRange>
    <InputRange
      :valueStart="boundStart"
      :valueEnd="boundEnd"
      :min="0"
      :max="100"
      :minGap="10"
      feedback="success"
      showValue="always"
      fullWidth
      @value-start-change="(v: number) => (boundStart = v)"
      @value-end-change="(v: number) => (boundEnd = v)"
    />
  </div>
</template>

Tick Marks

Pass marks to render dots along the track: marks (with a step) auto-generates evenly-spaced marks, or pass an array of { value, label? } to place explicit, labelled marks.

AstroReactSvelteVue

PreviewCode

FasterSmarter

---
import InputRange from "../InputRange.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "lg", direction: "column" })}
  style="width: 28rem; max-width: 100%"
>
  <InputRange value={40} min={0} max={100} step={20} marks fullWidth />
  <InputRange
    value={50}
    min={0}
    max={100}
    step={25}
    marks={[
      { value: 0, label: "Faster" },
      { value: 100, label: "Smarter" },
    ]}
    showValue
    fullWidth
  />
</div>

FasterSmarter

import { useState } from "react";
import { InputRange } from "../InputRange";
import { stack } from "@pindoba/styled-system/patterns";

export default function MarksDemo() {
  const [volume, setVolume] = useState(40);
  const [quality, setQuality] = useState(50);

  return (
    <div
      className={stack({ gap: "lg", direction: "column" })}
      style={{ width: "28rem", maxWidth: "100%" }}
    >
      <InputRange
        value={volume}
        onChange={(event) => setVolume(Number(event.currentTarget.value))}
        min={0}
        max={100}
        step={20}
        marks
        fullWidth
      />

      <InputRange
        value={quality}
        onChange={(event) => setQuality(Number(event.currentTarget.value))}
        min={0}
        max={100}
        step={25}
        marks={[
          { value: 0, label: "Faster" },
          { value: 100, label: "Smarter" },
        ]}
        showValue
        fullWidth
      />
    </div>
  );
}

Faster Smarter

<script lang="ts">
  import InputRange from "../input-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let quality = $state(50);
  let volume = $state(40);
</script>

<div
  class={stack({ gap: "lg", direction: "column" })}
  style="width: 28rem; max-width: 100%"
>
  <!-- Auto-generated marks from step. -->
  <InputRange bind:value={volume} min={0} max={100} step={20} marks fullWidth />

  <!-- Explicit, labelled marks. -->
  <InputRange
    bind:value={quality}
    min={0}
    max={100}
    step={25}
    marks={[
      { value: 0, label: "Faster" },
      { value: 100, label: "Smarter" },
    ]}
    showValue
    fullWidth
  />
</div>

FasterSmarter

<script setup lang="ts">
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const col = stack({ gap: "lg", direction: "column" });
const wrapStyle = { width: "28rem", maxWidth: "100%" };
const volume = ref(40);
const quality = ref(50);
const qualityMarks = [
  { value: 0, label: "Faster" },
  { value: 100, label: "Smarter" },
];
const onVolume = (e: Event) =>
  (volume.value = Number((e.target as HTMLInputElement).value));
const onQuality = (e: Event) =>
  (quality.value = Number((e.target as HTMLInputElement).value));
</script>

<template>
  <div :class="col" :style="wrapStyle">
    <InputRange
      :value="volume"
      :min="0"
      :max="100"
      :step="20"
      marks
      fullWidth
      @input="onVolume"
    />
    <InputRange
      :value="quality"
      :min="0"
      :max="100"
      :step="25"
      :marks="qualityMarks"
      showValue
      fullWidth
      @input="onQuality"
    />
  </div>
</template>

Stepped

appearance="stepped" gives the segmented look — a wider pill thumb, firmer dots, and snap-to-mark defaulted on. Combine with marks and a step.

AstroReactSvelteVue

PreviewCode

Faster

Smarter

---
import InputRange from "../InputRange.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "lg", direction: "column" })}
  style="width: 28rem; max-width: 100%"
>
  <InputRange
    value={50}
    min={0}
    max={100}
    step={25}
    appearance="stepped"
    marks
    fullWidth
  >
    <span slot="fieldPrefix">Faster</span>
    <span slot="fieldSuffix">Smarter</span>
  </InputRange>
</div>

Faster

Smarter

import { useState } from "react";
import { InputRange } from "../InputRange";
import { stack } from "@pindoba/styled-system/patterns";

export default function SteppedDemo() {
  const [effort, setEffort] = useState(50);

  return (
    <div
      className={stack({ gap: "lg", direction: "column" })}
      style={{ width: "28rem", maxWidth: "100%" }}
    >
      <InputRange
        value={effort}
        onChange={(event) => setEffort(Number(event.currentTarget.value))}
        min={0}
        max={100}
        step={25}
        appearance="stepped"
        marks
        fullWidth
        fieldPrefix={<span>Faster</span>}
        fieldSuffix={<span>Smarter</span>}
      />
    </div>
  );
}

Effort High

Faster

Smarter

<script lang="ts">
  import InputRange from "../input-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const effortLabels = ["Faster", "", "", "", "Smarter"];
  let effort = $state(50);
</script>

<div
  class={stack({ gap: "sm", direction: "column" })}
  style="width: 28rem; max-width: 100%"
>
  <span class={css({ fontSize: "sm", color: "neutral.text.muted" })}>
    Effort {effortLabels[Math.round(effort / 25)] || "High"}
  </span>
  <!-- appearance="stepped" gives the pill thumb + snap-to-mark segmented look. -->
  <InputRange
    bind:value={effort}
    min={0}
    max={100}
    step={25}
    appearance="stepped"
    marks
    fullWidth
  >
    {#snippet fieldPrefix()}
      <span>Faster</span>
    {/snippet}
    {#snippet fieldSuffix()}
      <span>Smarter</span>
    {/snippet}
  </InputRange>
</div>

Faster

Smarter

<script setup lang="ts">
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const col = stack({ gap: "lg", direction: "column" });
const wrapStyle = { width: "28rem", maxWidth: "100%" };
const effort = ref(50);
const onEffort = (e: Event) =>
  (effort.value = Number((e.target as HTMLInputElement).value));
</script>

<template>
  <div :class="col" :style="wrapStyle">
    <InputRange
      :value="effort"
      :min="0"
      :max="100"
      :step="25"
      appearance="stepped"
      marks
      fullWidth
      @input="onEffort"
    >
      <template #fieldPrefix><span>Faster</span></template>
      <template #fieldSuffix><span>Smarter</span></template>
    </InputRange>
  </div>
</template>

Snap to Marks

Set snap with an array of marks (and step="any" for fine input resolution) to snap the value to the nearest mark on drag or arrow-key — including unevenly-spaced stops.

AstroReactSvelteVue

PreviewCode

0102560100

---
import InputRange from "../InputRange.astro";
import { stack } from "@pindoba/styled-system/patterns";

const stops = [0, 10, 25, 60, 100];
---

<div
  class={stack({ gap: "lg", direction: "column" })}
  style="width: 28rem; max-width: 100%"
>
  <InputRange
    value={25}
    min={0}
    max={100}
    step="any"
    snap
    marks={stops.map((value) => ({ value, label: String(value) }))}
    fullWidth
  />
</div>

Level: 25

0102560100

import { useState } from "react";
import { InputRange } from "../InputRange";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const stops = [0, 10, 25, 60, 100];

export default function SnapDemo() {
  const [level, setLevel] = useState(25);

  return (
    <div
      className={stack({ gap: "sm", direction: "column" })}
      style={{ width: "28rem", maxWidth: "100%" }}
    >
      <span className={css({ fontSize: "sm", color: "neutral.text.muted" })}>
        Level: {level}
      </span>
      <InputRange
        value={level}
        onChange={(event) => setLevel(Number(event.currentTarget.value))}
        min={0}
        max={100}
        step="any"
        snap
        marks={stops.map((value) => ({ value, label: String(value) }))}
        fullWidth
      />
    </div>
  );
}

Level: 25

0 10 25 60 100

<script lang="ts">
  import InputRange from "../input-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  // Uneven marks — snapping lands on the nearest one, not a uniform step.
  const stops = [0, 10, 25, 60, 100];
  let level = $state(25);
</script>

<div
  class={stack({ gap: "sm", direction: "column" })}
  style="width: 28rem; max-width: 100%"
>
  <span class={css({ fontSize: "sm", color: "neutral.text.muted" })}>
    Level: {level}
  </span>
  <InputRange
    bind:value={level}
    min={0}
    max={100}
    step="any"
    snap
    marks={stops.map((value) => ({ value, label: String(value) }))}
    fullWidth
  />
</div>

Level: 25

0102560100

<script setup lang="ts">
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const col = stack({ gap: "sm", direction: "column" });
const wrapStyle = { width: "28rem", maxWidth: "100%" };
const label = css({ fontSize: "sm", color: "neutral.text.muted" });
const stops = [0, 10, 25, 60, 100];
const marks = stops.map((value) => ({ value, label: String(value) }));
const level = ref(25);
const onLevel = (e: Event) =>
  (level.value = Number((e.target as HTMLInputElement).value));
</script>

<template>
  <div :class="col" :style="wrapStyle">
    <span :class="label">Level: {{ level }}</span>
    <InputRange
      :value="level"
      :min="0"
      :max="100"
      step="any"
      snap
      :marks="marks"
      fullWidth
      @input="onLevel"
    />
  </div>
</template>

Custom Styling

The passThrough prop provides escape hatches for each slot: style accepts a Panda CSS SystemStyleObject and props forwards arbitrary HTML attributes to the corresponding element.

AstroReactSvelteVue

PreviewCode

Wrapped in a surface via passThrough

Squared thumb via passThrough

Forwarded ARIA attributes

Opacity

50%

---
import InputRange from "../InputRange.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Wrapped in a surface via passThrough</h3>
    <InputRange
      value={40}
      min={0}
      max={100}
      fullWidth
      passThrough={{
        root: {
          style: {
            background: "neutral.surface.hill",
            borderRadius: "md",
            padding: "md",
          },
        },
      }}
    />
  </div>

  <div>
    <h3>Squared thumb via passThrough</h3>
    <InputRange
      value={65}
      min={0}
      max={100}
      fullWidth
      passThrough={{
        input: {
          style: {
            "&::-webkit-slider-thumb": { borderRadius: "xs" },
            "&::-moz-range-thumb": { borderRadius: "xs" },
          },
        },
      }}
    />
  </div>

  <div>
    <h3>Forwarded ARIA attributes</h3>
    <InputRange
      value={50}
      min={0}
      max={100}
      fullWidth
      labelPosition="top"
      passThrough={{
        input: {
          props: {
            "aria-label": "Opacity",
            "data-testid": "opacity-slider",
          },
        },
      }}
    >
      <span slot="fieldPrefix" class={css({ fontWeight: "medium" })}>
        Opacity
      </span>
      <span slot="fieldSuffix" class={css({ textAlign: "right" })}>50%</span>
    </InputRange>
  </div>
</div>

Wrapped in a surface via passThrough

Squared thumb via passThrough

Forwarded ARIA attributes

Opacity

50%

import { useState } from "react";
import { InputRange } from "../InputRange";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function CustomDemo() {
  const [wrapped, setWrapped] = useState(40);
  const [squared, setSquared] = useState(65);
  const [opacity, setOpacity] = useState(50);

  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Wrapped in a surface via passThrough</h3>
        <InputRange
          value={wrapped}
          onChange={(event) => setWrapped(Number(event.currentTarget.value))}
          min={0}
          max={100}
          fullWidth
          passThrough={{
            root: {
              style: {
                background: "neutral.surface.hill",
                borderRadius: "md",
                padding: "md",
              },
            },
          }}
        />
      </div>

      <div>
        <h3>Squared thumb via passThrough</h3>
        <InputRange
          value={squared}
          onChange={(event) => setSquared(Number(event.currentTarget.value))}
          min={0}
          max={100}
          fullWidth
          passThrough={{
            input: {
              style: {
                "&::-webkit-slider-thumb": { borderRadius: "xs" },
                "&::-moz-range-thumb": { borderRadius: "xs" },
              },
            },
          }}
        />
      </div>

      <div>
        <h3>Forwarded ARIA attributes</h3>
        <InputRange
          value={opacity}
          onChange={(event) => setOpacity(Number(event.currentTarget.value))}
          min={0}
          max={100}
          fullWidth
          labelPosition="top"
          passThrough={{
            input: {
              props: {
                "aria-label": "Opacity",
                "data-testid": "opacity-slider",
              },
            },
          }}
          fieldPrefix={
            <span className={css({ fontWeight: "medium" })}>Opacity</span>
          }
          fieldSuffix={
            <span className={css({ textAlign: "right" })}>{opacity}%</span>
          }
        />
      </div>
    </div>
  );
}

Wrapped in a surface via passThrough

Squared thumb via passThrough

Forwarded ARIA attributes

Opacity

50%

<script lang="ts">
  import InputRange from "../input-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let wrapped = $state(40);
  let squared = $state(65);
  let opacity = $state(50);
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Wrapped in a surface via passThrough</h3>
    <InputRange
      bind:value={wrapped}
      min={0}
      max={100}
      fullWidth
      passThrough={{
        root: {
          style: {
            background: "neutral.surface.hill",
            borderRadius: "md",
            padding: "md",
          },
        },
      }}
    />
  </div>

  <div>
    <h3>Squared thumb via passThrough</h3>
    <InputRange
      bind:value={squared}
      min={0}
      max={100}
      fullWidth
      passThrough={{
        input: {
          style: {
            "&::-webkit-slider-thumb": { borderRadius: "xs" },
            "&::-moz-range-thumb": { borderRadius: "xs" },
          },
        },
      }}
    />
  </div>

  <div>
    <h3>Forwarded ARIA attributes</h3>
    <InputRange
      bind:value={opacity}
      min={0}
      max={100}
      fullWidth
      labelPosition="top"
      passThrough={{
        input: {
          props: {
            "aria-label": "Opacity",
            "data-testid": "opacity-slider",
          },
        },
      }}
    >
      {#snippet fieldPrefix()}
        <span class={css({ fontWeight: "medium" })}>Opacity</span>
      {/snippet}
      {#snippet fieldSuffix()}
        <span class={css({ textAlign: "right" })}>{opacity}%</span>
      {/snippet}
    </InputRange>
  </div>
</div>

Wrapped in a surface via passThrough

Squared thumb via passThrough

Forwarded ARIA attributes

Opacity

50%

<script setup lang="ts">
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
const col = stack({ gap: "xl", direction: "column" });
const right = css({ textAlign: "right" });
const medium = css({ fontWeight: "medium" });
const wrapped = ref(40);
const squared = ref(65);
const opacity = ref(50);
const set = (r: typeof opacity) => (e: Event) =>
  (r.value = Number((e.target as HTMLInputElement).value));
const onWrapped = set(wrapped);
const onSquared = set(squared);
const setOpacity = set(opacity);
</script>

<template>
  <div :class="col">
    <div>
      <h3>Wrapped in a surface via passThrough</h3>
      <InputRange
        :value="wrapped"
        :min="0"
        :max="100"
        fullWidth
        @input="onWrapped"
        :passThrough="{
          root: {
            style: {
              background: 'neutral.surface.hill',
              borderRadius: 'md',
              padding: 'md',
            },
          },
        }"
      />
    </div>
    <div>
      <h3>Squared thumb via passThrough</h3>
      <InputRange
        :value="squared"
        :min="0"
        :max="100"
        fullWidth
        @input="onSquared"
        :passThrough="{
          input: {
            style: {
              '&::-webkit-slider-thumb': { borderRadius: 'xs' },
              '&::-moz-range-thumb': { borderRadius: 'xs' },
            },
          },
        }"
      />
    </div>
    <div>
      <h3>Forwarded ARIA attributes</h3>
      <InputRange
        :value="opacity"
        :min="0"
        :max="100"
        fullWidth
        labelPosition="top"
        :passThrough="{
          input: {
            props: { 'aria-label': 'Opacity', 'data-testid': 'opacity-slider' },
          },
        }"
        @input="setOpacity"
      >
        <template #fieldPrefix><span :class="medium">Opacity</span></template>
        <template #fieldSuffix
          ><span :class="right">{{ opacity }}%</span></template
        >
      </InputRange>
    </div>
  </div>
</template>

#Feedback

#Size

#Prefix & Suffix

#Dual Range

#Tick Marks

#Stepped

#Snap to Marks

#Custom Styling

Wrapped in a surface via passThrough

Squared thumb via passThrough

Forwarded ARIA attributes

Feedback

Size

Prefix & Suffix

Dual Range

Tick Marks

Stepped

Snap to Marks

Custom Styling