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 default fader look is a full control-height row: a rounded fill grows to a thin handle bar, with the label and a live value readout inside the row. It follows the same control sizes as Input and Button, so it lines up with them in forms.

Fader

In a form, label the fader with a Field like any other control. The row is split into zones: the track (fill, handle and step dots) runs between the text segments, so the handle and dots never pass under the value. The readout reserves room for its widest value, so the track doesn’t shift as the number changes. Combine with appearance="stepped" and marks for dotted, snapping stops. When the value lands on a labelled mark, the readout shows the mark’s label instead of the number (“Medium” below). In dual mode, the start value reads on the left and the end value on the right.

PreviewCode

Opacity

Columns

Stepped: dots per step, snaps to them.

Quality

LowMediumHigh

Price

---
// GENERATED from packages/demos/input-range/fader.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import Field from "@pindoba/astro-field";
import { stack } from "@pindoba/styled-system/patterns";

const percent = { style: "percent", locale: "en-US" } as const;
const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
const qualities = [
  { value: 0, label: "Low" },
  { value: 1, label: "Medium" },
  { value: 2, label: "High" },
];
---

<div
  class={stack({
    gap: "md",
    direction: "column",
    width: "32rem",
    maxWidth: "100%",
  })}
>
  <Field label="Opacity">
    <InputRange
      value={0.4}
      min={0}
      max={1}
      step={0.01}
      formatValue={percent}
      fullWidth
    />
  </Field>
  <Field label="Columns" description="Stepped: dots per step, snaps to them.">
    <InputRange
      value={3}
      min={1}
      max={6}
      step={1}
      appearance="stepped"
      marks
      fullWidth
    />
  </Field>
  <Field label="Quality">
    <InputRange
      value={1}
      min={0}
      max={2}
      step={1}
      appearance="stepped"
      marks={qualities}
      fullWidth
    />
  </Field>
  <Field label="Price">
    <InputRange
      valueStart={200}
      valueEnd={750}
      min={0}
      max={1000}
      step={10}
      formatValue={usd}
      fullWidth
    />
  </Field>
</div>

Opacity

Columns

Stepped: dots per step, snaps to them.

Quality

LowMediumHigh

Price

// GENERATED from packages/demos/input-range/fader.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
import { Field } from "@pindoba/react-field";
import { stack } from "@pindoba/styled-system/patterns";

const percent = { style: "percent", locale: "en-US" } as const;
const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
const qualities = [
  { value: 0, label: "Low" },
  { value: 1, label: "Medium" },
  { value: 2, label: "High" },
];
export default function FaderDemo() {
  const [opacity, setOpacity] = useState(0.4);
  const [columns, setColumns] = useState(3);
  const [quality, setQuality] = useState(1);
  const [priceStart, setPriceStart] = useState(200);
  const [priceEnd, setPriceEnd] = useState(750);
  return (
    <div
      className={stack({
        gap: "md",
        direction: "column",
        width: "32rem",
        maxWidth: "100%",
      })}
    >
      <Field
        label="Opacity"
        control={(props) => (
          <InputRange
            {...props}
            value={opacity}
            onChange={(e) => setOpacity(Number(e.currentTarget.value))}
            min={0}
            max={1}
            step={0.01}
            formatValue={percent}
            fullWidth
          />
        )}
      />
      <Field
        label="Columns"
        description="Stepped: dots per step, snaps to them."
        control={(props) => (
          <InputRange
            {...props}
            value={columns}
            onChange={(e) => setColumns(Number(e.currentTarget.value))}
            min={1}
            max={6}
            step={1}
            appearance="stepped"
            marks
            fullWidth
          />
        )}
      />
      <Field
        label="Quality"
        control={(props) => (
          <InputRange
            {...props}
            value={quality}
            onChange={(e) => setQuality(Number(e.currentTarget.value))}
            min={0}
            max={2}
            step={1}
            appearance="stepped"
            marks={qualities}
            fullWidth
          />
        )}
      />
      <Field
        label="Price"
        control={(props) => (
          <InputRange
            {...props}
            valueStart={priceStart}
            onValueStartChange={setPriceStart}
            valueEnd={priceEnd}
            onValueEndChange={setPriceEnd}
            min={0}
            max={1000}
            step={10}
            formatValue={usd}
            fullWidth
          />
        )}
      />
    </div>
  );
}

Opacity

Columns

Stepped: dots per step, snaps to them.

Quality

Low Medium High

Price

<script lang="ts">
  // GENERATED from packages/demos/input-range/fader.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import Field from "@pindoba/svelte-field";
  import { stack } from "@pindoba/styled-system/patterns";

  const percent = { style: "percent", locale: "en-US" } as const;
  const usd = {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
    locale: "en-US",
  } as const;
  const qualities = [
    { value: 0, label: "Low" },
    { value: 1, label: "Medium" },
    { value: 2, label: "High" },
  ];

  let opacity = $state(0.4);
  let columns = $state(3);
  let quality = $state(1);
  let priceStart = $state(200);
  let priceEnd = $state(750);
</script>

<div
  class={stack({
    gap: "md",
    direction: "column",
    width: "32rem",
    maxWidth: "100%",
  })}
>
  <Field label="Opacity">
    {#snippet control(props)}
      <InputRange
        {...props}
        bind:value={opacity}
        min={0}
        max={1}
        step={0.01}
        formatValue={percent}
        fullWidth
      ></InputRange>
    {/snippet}
  </Field>
  <Field label="Columns" description="Stepped: dots per step, snaps to them.">
    {#snippet control(props)}
      <InputRange
        {...props}
        bind:value={columns}
        min={1}
        max={6}
        step={1}
        appearance="stepped"
        marks
        fullWidth
      ></InputRange>
    {/snippet}
  </Field>
  <Field label="Quality">
    {#snippet control(props)}
      <InputRange
        {...props}
        bind:value={quality}
        min={0}
        max={2}
        step={1}
        appearance="stepped"
        marks={qualities}
        fullWidth
      ></InputRange>
    {/snippet}
  </Field>
  <Field label="Price">
    {#snippet control(props)}
      <InputRange
        {...props}
        bind:valueStart={priceStart}
        bind:valueEnd={priceEnd}
        min={0}
        max={1000}
        step={10}
        formatValue={usd}
        fullWidth
      ></InputRange>
    {/snippet}
  </Field>
</div>

Opacity

Columns

Stepped: dots per step, snaps to them.

Quality

LowMediumHigh

Price

<script setup lang="ts">
// GENERATED from packages/demos/input-range/fader.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { Field } from "@pindoba/vue-field";
import { stack } from "@pindoba/styled-system/patterns";

const percent = { style: "percent", locale: "en-US" } as const;
const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
const qualities = [
  { value: 0, label: "Low" },
  { value: 1, label: "Medium" },
  { value: 2, label: "High" },
];

const opacity = ref(0.4);
const columns = ref(3);
const quality = ref(1);
const priceStart = ref(200);
const priceEnd = ref(750);
</script>

<template>
  <div
    :class="
      stack({
        gap: 'md',
        direction: 'column',
        width: '32rem',
        maxWidth: '100%',
      })
    "
  >
    <Field>
      <template #label>Opacity</template>
      <template #control="props">
        <InputRange
          v-bind="props"
          :value="opacity"
          :onInput="
            (e: Event) =>
              (opacity = Number((e.target as HTMLInputElement).value))
          "
          :min="0"
          :max="1"
          :step="0.01"
          :formatValue="percent"
          :fullWidth="true"
        ></InputRange>
      </template>
    </Field>
    <Field>
      <template #label>Columns</template>
      <template #description>Stepped: dots per step, snaps to them.</template>
      <template #control="props">
        <InputRange
          v-bind="props"
          :value="columns"
          :onInput="
            (e: Event) =>
              (columns = Number((e.target as HTMLInputElement).value))
          "
          :min="1"
          :max="6"
          :step="1"
          appearance="stepped"
          :marks="true"
          :fullWidth="true"
        ></InputRange>
      </template>
    </Field>
    <Field>
      <template #label>Quality</template>
      <template #control="props">
        <InputRange
          v-bind="props"
          :value="quality"
          :onInput="
            (e: Event) =>
              (quality = Number((e.target as HTMLInputElement).value))
          "
          :min="0"
          :max="2"
          :step="1"
          appearance="stepped"
          :marks="qualities"
          :fullWidth="true"
        ></InputRange>
      </template>
    </Field>
    <Field>
      <template #label>Price</template>
      <template #control="props">
        <InputRange
          v-bind="props"
          :valueStart="priceStart"
          :onValueStartChange="(next: number) => (priceStart = next)"
          :valueEnd="priceEnd"
          :onValueEndChange="(next: number) => (priceEnd = next)"
          :min="0"
          :max="1000"
          :step="10"
          :formatValue="usd"
          :fullWidth="true"
        ></InputRange>
      </template>
    </Field>
  </div>
</template>

Opacity

Columns

Stepped: dots per step, snaps to them.

Quality

LowMediumHigh

Price

// GENERATED from packages/demos/input-range/fader.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
import { Field } from "@pindoba/solid-field";
import { stack } from "@pindoba/styled-system/patterns";

const percent = { style: "percent", locale: "en-US" } as const;
const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
const qualities = [
  { value: 0, label: "Low" },
  { value: 1, label: "Medium" },
  { value: 2, label: "High" },
];
export default function FaderDemo() {
  const [opacity, setOpacity] = createSignal(0.4);
  const [columns, setColumns] = createSignal(3);
  const [quality, setQuality] = createSignal(1);
  const [priceStart, setPriceStart] = createSignal(200);
  const [priceEnd, setPriceEnd] = createSignal(750);
  return (
    <div
      class={stack({
        gap: "md",
        direction: "column",
        width: "32rem",
        maxWidth: "100%",
      })}
    >
      <Field
        label="Opacity"
        control={(props) => (
          <InputRange
            {...props}
            value={opacity()}
            onInput={(e) => setOpacity(Number(e.currentTarget.value))}
            min={0}
            max={1}
            step={0.01}
            formatValue={percent}
            fullWidth
          />
        )}
      />
      <Field
        label="Columns"
        description="Stepped: dots per step, snaps to them."
        control={(props) => (
          <InputRange
            {...props}
            value={columns()}
            onInput={(e) => setColumns(Number(e.currentTarget.value))}
            min={1}
            max={6}
            step={1}
            appearance="stepped"
            marks
            fullWidth
          />
        )}
      />
      <Field
        label="Quality"
        control={(props) => (
          <InputRange
            {...props}
            value={quality()}
            onInput={(e) => setQuality(Number(e.currentTarget.value))}
            min={0}
            max={2}
            step={1}
            appearance="stepped"
            marks={qualities}
            fullWidth
          />
        )}
      />
      <Field
        label="Price"
        control={(props) => (
          <InputRange
            {...props}
            valueStart={priceStart()}
            onValueStartChange={setPriceStart}
            valueEnd={priceEnd()}
            onValueEndChange={setPriceEnd}
            min={0}
            max={1000}
            step={10}
            formatValue={usd}
            fullWidth
          />
        )}
      />
    </div>
  );
}

Label inside the row

For compact settings panels, pass label to put the label in the row’s leading segment. It also becomes the input’s accessible name. Use origin="center" for signed ranges.

Inline segments hug their text, so the tracks of a stack of rows start at different points. To line them up, use labelPosition below.

Label and value above or below

labelPosition="top" (or "bottom") turns the label and the live value into a header line, with the full-width track below (or above) it. Every track in a stack then starts and ends at the same place, which suits settings and inspector panels. Dual ranges work the same way: the start value on the left and the end value on the right, or the label on the left and start – end on the right.

PreviewCode

---
// GENERATED from packages/demos/input-range/label-position.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
const grouped = { locale: "en-US" } as const;
---

<div
  class={stack({
    gap: "md",
    direction: "column",
    width: "32rem",
    maxWidth: "100%",
  })}
>
  <InputRange
    label="Rotation speed"
    labelPosition="top"
    value={3.1}
    min={0}
    max={5}
    step={0.1}
    fullWidth
  />
  <InputRange
    label="Spiral arms"
    labelPosition="top"
    value={4}
    min={1}
    max={6}
    step={1}
    appearance="stepped"
    marks
    fullWidth
  />
  <InputRange
    label="Stars"
    labelPosition="top"
    value={4000}
    min={0}
    max={10000}
    step={100}
    formatValue={grouped}
    fullWidth
  />
  <InputRange
    labelPosition="top"
    valueStart={200}
    valueEnd={750}
    min={0}
    max={1000}
    step={10}
    formatValue={usd}
    fullWidth
  />
  <InputRange
    label="Hours"
    labelPosition="bottom"
    valueStart={9}
    valueEnd={17}
    min={0}
    max={24}
    minGap={1}
    fullWidth
  />
</div>

// GENERATED from packages/demos/input-range/label-position.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
const grouped = { locale: "en-US" } as const;
export default function LabelPositionDemo() {
  const [speed, setSpeed] = useState(3.1);
  const [arms, setArms] = useState(4);
  const [stars, setStars] = useState(4000);
  const [priceStart, setPriceStart] = useState(200);
  const [priceEnd, setPriceEnd] = useState(750);
  const [hoursStart, setHoursStart] = useState(9);
  const [hoursEnd, setHoursEnd] = useState(17);
  return (
    <div
      className={stack({
        gap: "md",
        direction: "column",
        width: "32rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        label="Rotation speed"
        labelPosition="top"
        value={speed}
        onChange={(e) => setSpeed(Number(e.currentTarget.value))}
        min={0}
        max={5}
        step={0.1}
        fullWidth
      />
      <InputRange
        label="Spiral arms"
        labelPosition="top"
        value={arms}
        onChange={(e) => setArms(Number(e.currentTarget.value))}
        min={1}
        max={6}
        step={1}
        appearance="stepped"
        marks
        fullWidth
      />
      <InputRange
        label="Stars"
        labelPosition="top"
        value={stars}
        onChange={(e) => setStars(Number(e.currentTarget.value))}
        min={0}
        max={10000}
        step={100}
        formatValue={grouped}
        fullWidth
      />
      <InputRange
        labelPosition="top"
        valueStart={priceStart}
        onValueStartChange={setPriceStart}
        valueEnd={priceEnd}
        onValueEndChange={setPriceEnd}
        min={0}
        max={1000}
        step={10}
        formatValue={usd}
        fullWidth
      />
      <InputRange
        label="Hours"
        labelPosition="bottom"
        valueStart={hoursStart}
        onValueStartChange={setHoursStart}
        valueEnd={hoursEnd}
        onValueEndChange={setHoursEnd}
        min={0}
        max={24}
        minGap={1}
        fullWidth
      />
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/input-range/label-position.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import { stack } from "@pindoba/styled-system/patterns";

  const usd = {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
    locale: "en-US",
  } as const;
  const grouped = { locale: "en-US" } as const;

  let speed = $state(3.1);
  let arms = $state(4);
  let stars = $state(4000);
  let priceStart = $state(200);
  let priceEnd = $state(750);
  let hoursStart = $state(9);
  let hoursEnd = $state(17);
</script>

<div
  class={stack({
    gap: "md",
    direction: "column",
    width: "32rem",
    maxWidth: "100%",
  })}
>
  <InputRange
    label="Rotation speed"
    labelPosition="top"
    bind:value={speed}
    min={0}
    max={5}
    step={0.1}
    fullWidth
  ></InputRange>
  <InputRange
    label="Spiral arms"
    labelPosition="top"
    bind:value={arms}
    min={1}
    max={6}
    step={1}
    appearance="stepped"
    marks
    fullWidth
  ></InputRange>
  <InputRange
    label="Stars"
    labelPosition="top"
    bind:value={stars}
    min={0}
    max={10000}
    step={100}
    formatValue={grouped}
    fullWidth
  ></InputRange>
  <InputRange
    labelPosition="top"
    bind:valueStart={priceStart}
    bind:valueEnd={priceEnd}
    min={0}
    max={1000}
    step={10}
    formatValue={usd}
    fullWidth
  ></InputRange>
  <InputRange
    label="Hours"
    labelPosition="bottom"
    bind:valueStart={hoursStart}
    bind:valueEnd={hoursEnd}
    min={0}
    max={24}
    minGap={1}
    fullWidth
  ></InputRange>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/input-range/label-position.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
const grouped = { locale: "en-US" } as const;

const speed = ref(3.1);
const arms = ref(4);
const stars = ref(4000);
const priceStart = ref(200);
const priceEnd = ref(750);
const hoursStart = ref(9);
const hoursEnd = ref(17);
</script>

<template>
  <div
    :class="
      stack({
        gap: 'md',
        direction: 'column',
        width: '32rem',
        maxWidth: '100%',
      })
    "
  >
    <InputRange
      label="Rotation speed"
      labelPosition="top"
      :value="speed"
      :onInput="
        (e: Event) => (speed = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="5"
      :step="0.1"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Spiral arms"
      labelPosition="top"
      :value="arms"
      :onInput="
        (e: Event) => (arms = Number((e.target as HTMLInputElement).value))
      "
      :min="1"
      :max="6"
      :step="1"
      appearance="stepped"
      :marks="true"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Stars"
      labelPosition="top"
      :value="stars"
      :onInput="
        (e: Event) => (stars = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="10000"
      :step="100"
      :formatValue="grouped"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      labelPosition="top"
      :valueStart="priceStart"
      :onValueStartChange="(next: number) => (priceStart = next)"
      :valueEnd="priceEnd"
      :onValueEndChange="(next: number) => (priceEnd = next)"
      :min="0"
      :max="1000"
      :step="10"
      :formatValue="usd"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Hours"
      labelPosition="bottom"
      :valueStart="hoursStart"
      :onValueStartChange="(next: number) => (hoursStart = next)"
      :valueEnd="hoursEnd"
      :onValueEndChange="(next: number) => (hoursEnd = next)"
      :min="0"
      :max="24"
      :minGap="1"
      :fullWidth="true"
    ></InputRange>
  </div>
</template>

// GENERATED from packages/demos/input-range/label-position.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
const grouped = { locale: "en-US" } as const;
export default function LabelPositionDemo() {
  const [speed, setSpeed] = createSignal(3.1);
  const [arms, setArms] = createSignal(4);
  const [stars, setStars] = createSignal(4000);
  const [priceStart, setPriceStart] = createSignal(200);
  const [priceEnd, setPriceEnd] = createSignal(750);
  const [hoursStart, setHoursStart] = createSignal(9);
  const [hoursEnd, setHoursEnd] = createSignal(17);
  return (
    <div
      class={stack({
        gap: "md",
        direction: "column",
        width: "32rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        label="Rotation speed"
        labelPosition="top"
        value={speed()}
        onInput={(e) => setSpeed(Number(e.currentTarget.value))}
        min={0}
        max={5}
        step={0.1}
        fullWidth
      />
      <InputRange
        label="Spiral arms"
        labelPosition="top"
        value={arms()}
        onInput={(e) => setArms(Number(e.currentTarget.value))}
        min={1}
        max={6}
        step={1}
        appearance="stepped"
        marks
        fullWidth
      />
      <InputRange
        label="Stars"
        labelPosition="top"
        value={stars()}
        onInput={(e) => setStars(Number(e.currentTarget.value))}
        min={0}
        max={10000}
        step={100}
        formatValue={grouped}
        fullWidth
      />
      <InputRange
        labelPosition="top"
        valueStart={priceStart()}
        onValueStartChange={setPriceStart}
        valueEnd={priceEnd()}
        onValueEndChange={setPriceEnd}
        min={0}
        max={1000}
        step={10}
        formatValue={usd}
        fullWidth
      />
      <InputRange
        label="Hours"
        labelPosition="bottom"
        valueStart={hoursStart()}
        onValueStartChange={setHoursStart}
        valueEnd={hoursEnd()}
        onValueEndChange={setHoursEnd}
        min={0}
        max={24}
        minGap={1}
        fullWidth
      />
    </div>
  );
}

PreviewCode

LowMediumHigh

---
// GENERATED from packages/demos/input-range/inline-label.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const qualities = [
  { value: 0, label: "Low" },
  { value: 1, label: "Medium" },
  { value: 2, label: "High" },
];
---

<div
  class={stack({
    gap: "xs",
    direction: "column",
    width: "32rem",
    maxWidth: "100%",
  })}
>
  <InputRange label="Volume" value={62} min={0} max={100} fullWidth />
  <InputRange
    label="Speed"
    value={1}
    min={0.5}
    max={2}
    step={0.25}
    appearance="stepped"
    marks
    fullWidth
  />
  <InputRange
    label="Balance"
    value={0}
    min={-50}
    max={50}
    step={10}
    origin="center"
    appearance="stepped"
    marks
    fullWidth
  />
  <InputRange
    label="Quality"
    value={1}
    min={0}
    max={2}
    step={1}
    appearance="stepped"
    marks={qualities}
    fullWidth
  />
</div>

LowMediumHigh

// GENERATED from packages/demos/input-range/inline-label.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const qualities = [
  { value: 0, label: "Low" },
  { value: 1, label: "Medium" },
  { value: 2, label: "High" },
];
export default function InlineLabelDemo() {
  const [volume, setVolume] = useState(62);
  const [speed, setSpeed] = useState(1);
  const [balance, setBalance] = useState(0);
  const [quality, setQuality] = useState(1);
  return (
    <div
      className={stack({
        gap: "xs",
        direction: "column",
        width: "32rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        label="Volume"
        value={volume}
        onChange={(e) => setVolume(Number(e.currentTarget.value))}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        label="Speed"
        value={speed}
        onChange={(e) => setSpeed(Number(e.currentTarget.value))}
        min={0.5}
        max={2}
        step={0.25}
        appearance="stepped"
        marks
        fullWidth
      />
      <InputRange
        label="Balance"
        value={balance}
        onChange={(e) => setBalance(Number(e.currentTarget.value))}
        min={-50}
        max={50}
        step={10}
        origin="center"
        appearance="stepped"
        marks
        fullWidth
      />
      <InputRange
        label="Quality"
        value={quality}
        onChange={(e) => setQuality(Number(e.currentTarget.value))}
        min={0}
        max={2}
        step={1}
        appearance="stepped"
        marks={qualities}
        fullWidth
      />
    </div>
  );
}

Low Medium High

<script lang="ts">
  // GENERATED from packages/demos/input-range/inline-label.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import { stack } from "@pindoba/styled-system/patterns";

  const qualities = [
    { value: 0, label: "Low" },
    { value: 1, label: "Medium" },
    { value: 2, label: "High" },
  ];

  let volume = $state(62);
  let speed = $state(1);
  let balance = $state(0);
  let quality = $state(1);
</script>

<div
  class={stack({
    gap: "xs",
    direction: "column",
    width: "32rem",
    maxWidth: "100%",
  })}
>
  <InputRange label="Volume" bind:value={volume} min={0} max={100} fullWidth
  ></InputRange>
  <InputRange
    label="Speed"
    bind:value={speed}
    min={0.5}
    max={2}
    step={0.25}
    appearance="stepped"
    marks
    fullWidth
  ></InputRange>
  <InputRange
    label="Balance"
    bind:value={balance}
    min={-50}
    max={50}
    step={10}
    origin="center"
    appearance="stepped"
    marks
    fullWidth
  ></InputRange>
  <InputRange
    label="Quality"
    bind:value={quality}
    min={0}
    max={2}
    step={1}
    appearance="stepped"
    marks={qualities}
    fullWidth
  ></InputRange>
</div>

LowMediumHigh

<script setup lang="ts">
// GENERATED from packages/demos/input-range/inline-label.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const qualities = [
  { value: 0, label: "Low" },
  { value: 1, label: "Medium" },
  { value: 2, label: "High" },
];

const volume = ref(62);
const speed = ref(1);
const balance = ref(0);
const quality = ref(1);
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xs',
        direction: 'column',
        width: '32rem',
        maxWidth: '100%',
      })
    "
  >
    <InputRange
      label="Volume"
      :value="volume"
      :onInput="
        (e: Event) => (volume = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="100"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Speed"
      :value="speed"
      :onInput="
        (e: Event) => (speed = Number((e.target as HTMLInputElement).value))
      "
      :min="0.5"
      :max="2"
      :step="0.25"
      appearance="stepped"
      :marks="true"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Balance"
      :value="balance"
      :onInput="
        (e: Event) => (balance = Number((e.target as HTMLInputElement).value))
      "
      :min="-50"
      :max="50"
      :step="10"
      origin="center"
      appearance="stepped"
      :marks="true"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Quality"
      :value="quality"
      :onInput="
        (e: Event) => (quality = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="2"
      :step="1"
      appearance="stepped"
      :marks="qualities"
      :fullWidth="true"
    ></InputRange>
  </div>
</template>

LowMediumHigh

// GENERATED from packages/demos/input-range/inline-label.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const qualities = [
  { value: 0, label: "Low" },
  { value: 1, label: "Medium" },
  { value: 2, label: "High" },
];
export default function InlineLabelDemo() {
  const [volume, setVolume] = createSignal(62);
  const [speed, setSpeed] = createSignal(1);
  const [balance, setBalance] = createSignal(0);
  const [quality, setQuality] = createSignal(1);
  return (
    <div
      class={stack({
        gap: "xs",
        direction: "column",
        width: "32rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        label="Volume"
        value={volume()}
        onInput={(e) => setVolume(Number(e.currentTarget.value))}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        label="Speed"
        value={speed()}
        onInput={(e) => setSpeed(Number(e.currentTarget.value))}
        min={0.5}
        max={2}
        step={0.25}
        appearance="stepped"
        marks
        fullWidth
      />
      <InputRange
        label="Balance"
        value={balance()}
        onInput={(e) => setBalance(Number(e.currentTarget.value))}
        min={-50}
        max={50}
        step={10}
        origin="center"
        appearance="stepped"
        marks
        fullWidth
      />
      <InputRange
        label="Quality"
        value={quality()}
        onInput={(e) => setQuality(Number(e.currentTarget.value))}
        min={0}
        max={2}
        step={1}
        appearance="stepped"
        marks={qualities}
        fullWidth
      />
    </div>
  );
}

Formatting the readout

formatValue formats the readout and the input’s aria-valuetext. Pass a function ((n) => n + "%") or Intl.NumberFormat options, optionally with a locale. In Astro, prefer the options form: it is serializable, so the client script keeps formatting as the value changes. A function only formats the server render there.

Track variant

variant="track" keeps the classic thin rail with a round thumb, a primary tint and a transparent row. Prefix/suffix columns and tick labels are track-only layouts. Most demos below use it.

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.

PreviewCode

---
// GENERATED from packages/demos/input-range/feedback.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";
---

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

// GENERATED from packages/demos/input-range/feedback.demo.tsx — edit the source, not this file.
import { InputRange } from "@pindoba/react-input-range";
import { stack } from "@pindoba/styled-system/patterns";

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

<script lang="ts">
  // GENERATED from packages/demos/input-range/feedback.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

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

<script setup lang="ts">
// GENERATED from packages/demos/input-range/feedback.demo.tsx — edit the source, not this file.
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";
</script>

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

// GENERATED from packages/demos/input-range/feedback.demo.tsx — edit the source, not this file.
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";

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

Size

Four sizes follow the control size scale: the fader row matches the height, padding, and radius of an Input or Button of the same size. In the track variant, they scale the rail height and thumb diameter together.

PreviewCode

---
// GENERATED from packages/demos/input-range/size.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";
---

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

// GENERATED from packages/demos/input-range/size.demo.tsx — edit the source, not this file.
import { InputRange } from "@pindoba/react-input-range";
import { stack } from "@pindoba/styled-system/patterns";

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

<script lang="ts">
  // GENERATED from packages/demos/input-range/size.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

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

<script setup lang="ts">
// GENERATED from packages/demos/input-range/size.demo.tsx — edit the source, not this file.
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <InputRange
      label="Extra small"
      size="xs"
      :value="20"
      :min="0"
      :max="100"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Small"
      size="sm"
      :value="40"
      :min="0"
      :max="100"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Medium"
      size="md"
      :value="60"
      :min="0"
      :max="100"
      :fullWidth="true"
    ></InputRange>
    <InputRange
      label="Large"
      size="lg"
      :value="80"
      :min="0"
      :max="100"
      :fullWidth="true"
    ></InputRange>
  </div>
</template>

// GENERATED from packages/demos/input-range/size.demo.tsx — edit the source, not this file.
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column" })}>
      <InputRange
        label="Extra small"
        size="xs"
        value={20}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        label="Small"
        size="sm"
        value={40}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        label="Medium"
        size="md"
        value={60}
        min={0}
        max={100}
        fullWidth
      />
      <InputRange
        label="Large"
        size="lg"
        value={80}
        min={0}
        max={100}
        fullWidth
      />
    </div>
  );
}

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.

PreviewCode

Volume

35%

Brightness

72%

100

---
// GENERATED from packages/demos/input-range/prefix-suffix.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const volume = 35;
const brightness = 72;
---

<div
  class={stack({ gap: "lg", direction: "column" })}
  data-ir-root="input-range/prefix-suffix"
>
  <InputRange
    variant="track"
    aria-label="Volume"
    value={35}
    min={0}
    max={100}
    fullWidth
    data-ir="1"
  >
    <span slot="field-prefix" class={css({ whiteSpace: "nowrap" })}>
      Volume
    </span>
    <span
      slot="field-suffix"
      class={css({ minWidth: "3ch", textAlign: "right" })}
    >
      <!--ir:2-->
      {volume}
      <!--/ir-->%
    </span>
  </InputRange>

  <InputRange
    variant="track"
    aria-label="Brightness"
    value={72}
    min={0}
    max={100}
    step={5}
    fullWidth
    labelPosition="top"
    data-ir="3"
  >
    <span slot="field-prefix">Brightness</span>
    <span slot="field-suffix" class={css({ textAlign: "right" })}>
      <!--ir:4-->
      {brightness}
      <!--/ir-->%
    </span>
  </InputRange>

  <InputRange
    variant="track"
    aria-label="Value"
    value={60}
    min={0}
    max={100}
    fullWidth
    labelPosition="bottom"
    data-ir="5"
  >
    <span slot="field-prefix">0</span>
    <span slot="field-suffix" class={css({ textAlign: "right" })}>
      100
    </span>
  </InputRange>
</div>

<script>
  import { hydrate } from "./_client/prefix-suffix.ts";

  document
    .querySelectorAll('[data-ir-root="input-range/prefix-suffix"]')
    .forEach((root) => hydrate([root]));
</script>

Volume

35%

Brightness

72%

100

// GENERATED from packages/demos/input-range/prefix-suffix.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
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
        variant="track"
        aria-label="Volume"
        value={volume}
        onChange={(e) => setVolume(Number(e.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
        variant="track"
        aria-label="Brightness"
        value={brightness}
        onChange={(e) => setBrightness(Number(e.currentTarget.value))}
        min={0}
        max={100}
        step={5}
        fullWidth
        labelPosition="top"
        fieldPrefix={<span>Brightness</span>}
        fieldSuffix={
          <span className={css({ textAlign: "right" })}>{brightness}%</span>
        }
      />

      <InputRange
        variant="track"
        aria-label="Value"
        value={range}
        onChange={(e) => setRange(Number(e.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">
  // GENERATED from packages/demos/input-range/prefix-suffix.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  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
    variant="track"
    aria-label="Volume"
    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
    variant="track"
    aria-label="Brightness"
    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
    variant="track"
    aria-label="Value"
    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">
// GENERATED from packages/demos/input-range/prefix-suffix.demo.tsx — edit the source, not this file.
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 volume = ref(35);
const brightness = ref(72);
const range = ref(60);
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column' })">
    <InputRange
      variant="track"
      aria-label="Volume"
      :value="volume"
      :onInput="
        (e: Event) => (volume = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="100"
      :fullWidth="true"
    >
      <template #fieldPrefix>
        <span :class="css({ whiteSpace: 'nowrap' })">Volume</span>
      </template>
      <template #fieldSuffix>
        <span :class="css({ minWidth: '3ch', textAlign: 'right' })"
          >{{ volume }}%</span
        >
      </template>
    </InputRange>

    <InputRange
      variant="track"
      aria-label="Brightness"
      :value="brightness"
      :onInput="
        (e: Event) =>
          (brightness = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="100"
      :step="5"
      :fullWidth="true"
      labelPosition="top"
    >
      <template #fieldPrefix>
        <span>Brightness</span>
      </template>
      <template #fieldSuffix>
        <span :class="css({ textAlign: 'right' })">{{ brightness }}%</span>
      </template>
    </InputRange>

    <InputRange
      variant="track"
      aria-label="Value"
      :value="range"
      :onInput="
        (e: Event) => (range = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="100"
      :fullWidth="true"
      labelPosition="bottom"
    >
      <template #fieldPrefix>
        <span>0</span>
      </template>
      <template #fieldSuffix>
        <span :class="css({ textAlign: 'right' })">100</span>
      </template>
    </InputRange>
  </div>
</template>

Volume

35%

Brightness

72%

100

// GENERATED from packages/demos/input-range/prefix-suffix.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function PrefixSuffixDemo() {
  const [volume, setVolume] = createSignal(35);
  const [brightness, setBrightness] = createSignal(72);
  const [range, setRange] = createSignal(60);
  return (
    <div class={stack({ gap: "lg", direction: "column" })}>
      <InputRange
        variant="track"
        aria-label="Volume"
        value={volume()}
        onInput={(e) => setVolume(Number(e.currentTarget.value))}
        min={0}
        max={100}
        fullWidth
        fieldPrefix={<span class={css({ whiteSpace: "nowrap" })}>Volume</span>}
        fieldSuffix={
          <span class={css({ minWidth: "3ch", textAlign: "right" })}>
            {volume()}%
          </span>
        }
      />

      <InputRange
        variant="track"
        aria-label="Brightness"
        value={brightness()}
        onInput={(e) => setBrightness(Number(e.currentTarget.value))}
        min={0}
        max={100}
        step={5}
        fullWidth
        labelPosition="top"
        fieldPrefix={<span>Brightness</span>}
        fieldSuffix={
          <span class={css({ textAlign: "right" })}>{brightness()}%</span>
        }
      />

      <InputRange
        variant="track"
        aria-label="Value"
        value={range()}
        onInput={(e) => setRange(Number(e.currentTarget.value))}
        min={0}
        max={100}
        fullWidth
        labelPosition="bottom"
        fieldPrefix={<span>0</span>}
        fieldSuffix={<span class={css({ textAlign: "right" })}>100</span>}
      />
    </div>
  );
}

Dual Range

Provide valueStart and valueEnd (instead of a single value) to select an interval with two thumbs — ideal for price ranges or bounds. In the fader, the start value reads on the left and the end value on the right. With a label, the label takes the left side and the interval reads as start – end on the right. 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.

PreviewCode

---
// GENERATED from packages/demos/input-range/dual.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
---

<div
  class={stack({
    gap: "md",
    direction: "column",
    width: "28rem",
    maxWidth: "100%",
  })}
>
  <InputRange
    valueStart={200}
    valueEnd={750}
    min={0}
    max={1000}
    step={10}
    formatValue={usd}
    fullWidth
  />

  <InputRange
    label="Hours"
    valueStart={9}
    valueEnd={17}
    min={0}
    max={24}
    minGap={1}
    fullWidth
  />

  <InputRange
    variant="track"
    valueStart={30}
    valueEnd={60}
    min={0}
    max={100}
    minGap={10}
    feedback="success"
    showValue="always"
    fullWidth
  />
</div>

// GENERATED from packages/demos/input-range/dual.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
export default function DualDemo() {
  const [priceStart, setPriceStart] = useState(200);
  const [priceEnd, setPriceEnd] = useState(750);
  const [hoursStart, setHoursStart] = useState(9);
  const [hoursEnd, setHoursEnd] = useState(17);
  const [boundStart, setBoundStart] = useState(30);
  const [boundEnd, setBoundEnd] = useState(60);
  return (
    <div
      className={stack({
        gap: "md",
        direction: "column",
        width: "28rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        valueStart={priceStart}
        onValueStartChange={setPriceStart}
        valueEnd={priceEnd}
        onValueEndChange={setPriceEnd}
        min={0}
        max={1000}
        step={10}
        formatValue={usd}
        fullWidth
      />

      <InputRange
        label="Hours"
        valueStart={hoursStart}
        onValueStartChange={setHoursStart}
        valueEnd={hoursEnd}
        onValueEndChange={setHoursEnd}
        min={0}
        max={24}
        minGap={1}
        fullWidth
      />

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

<script lang="ts">
  // GENERATED from packages/demos/input-range/dual.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import { stack } from "@pindoba/styled-system/patterns";

  const usd = {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
    locale: "en-US",
  } as const;

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

<div
  class={stack({
    gap: "md",
    direction: "column",
    width: "28rem",
    maxWidth: "100%",
  })}
>
  <InputRange
    bind:valueStart={priceStart}
    bind:valueEnd={priceEnd}
    min={0}
    max={1000}
    step={10}
    formatValue={usd}
    fullWidth
  ></InputRange>

  <InputRange
    label="Hours"
    bind:valueStart={hoursStart}
    bind:valueEnd={hoursEnd}
    min={0}
    max={24}
    minGap={1}
    fullWidth
  ></InputRange>

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

<script setup lang="ts">
// GENERATED from packages/demos/input-range/dual.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;

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

<template>
  <div
    :class="
      stack({
        gap: 'md',
        direction: 'column',
        width: '28rem',
        maxWidth: '100%',
      })
    "
  >
    <InputRange
      :valueStart="priceStart"
      :onValueStartChange="(next: number) => (priceStart = next)"
      :valueEnd="priceEnd"
      :onValueEndChange="(next: number) => (priceEnd = next)"
      :min="0"
      :max="1000"
      :step="10"
      :formatValue="usd"
      :fullWidth="true"
    ></InputRange>

    <InputRange
      label="Hours"
      :valueStart="hoursStart"
      :onValueStartChange="(next: number) => (hoursStart = next)"
      :valueEnd="hoursEnd"
      :onValueEndChange="(next: number) => (hoursEnd = next)"
      :min="0"
      :max="24"
      :minGap="1"
      :fullWidth="true"
    ></InputRange>

    <InputRange
      variant="track"
      :valueStart="boundStart"
      :onValueStartChange="(next: number) => (boundStart = next)"
      :valueEnd="boundEnd"
      :onValueEndChange="(next: number) => (boundEnd = next)"
      :min="0"
      :max="100"
      :minGap="10"
      feedback="success"
      showValue="always"
      :fullWidth="true"
    ></InputRange>
  </div>
</template>

// GENERATED from packages/demos/input-range/dual.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const usd = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
  locale: "en-US",
} as const;
export default function DualDemo() {
  const [priceStart, setPriceStart] = createSignal(200);
  const [priceEnd, setPriceEnd] = createSignal(750);
  const [hoursStart, setHoursStart] = createSignal(9);
  const [hoursEnd, setHoursEnd] = createSignal(17);
  const [boundStart, setBoundStart] = createSignal(30);
  const [boundEnd, setBoundEnd] = createSignal(60);
  return (
    <div
      class={stack({
        gap: "md",
        direction: "column",
        width: "28rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        valueStart={priceStart()}
        onValueStartChange={setPriceStart}
        valueEnd={priceEnd()}
        onValueEndChange={setPriceEnd}
        min={0}
        max={1000}
        step={10}
        formatValue={usd}
        fullWidth
      />

      <InputRange
        label="Hours"
        valueStart={hoursStart()}
        onValueStartChange={setHoursStart}
        valueEnd={hoursEnd()}
        onValueEndChange={setHoursEnd}
        min={0}
        max={24}
        minGap={1}
        fullWidth
      />

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

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.

PreviewCode

FasterSmarter

---
// GENERATED from packages/demos/input-range/marks.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "lg",
    direction: "column",
    width: "28rem",
    maxWidth: "100%",
  })}
>
  <InputRange
    variant="track"
    aria-label="Value"
    value={40}
    min={0}
    max={100}
    step={20}
    marks
    fullWidth
  />

  <InputRange
    variant="track"
    aria-label="Speed"
    value={50}
    min={0}
    max={100}
    step={25}
    marks={[
      { value: 0, label: "Faster" },
      { value: 100, label: "Smarter" },
    ]}
    showValue
    fullWidth
  />
</div>

FasterSmarter

// GENERATED from packages/demos/input-range/marks.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
import { stack } from "@pindoba/styled-system/patterns";

export default function MarksDemo() {
  const [quality, setQuality] = useState(50);
  const [volume, setVolume] = useState(40);
  return (
    <div
      className={stack({
        gap: "lg",
        direction: "column",
        width: "28rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        variant="track"
        aria-label="Value"
        value={volume}
        onChange={(e) => setVolume(Number(e.currentTarget.value))}
        min={0}
        max={100}
        step={20}
        marks
        fullWidth
      />

      <InputRange
        variant="track"
        aria-label="Speed"
        value={quality}
        onChange={(e) => setQuality(Number(e.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">
  // GENERATED from packages/demos/input-range/marks.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import { stack } from "@pindoba/styled-system/patterns";

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

<div
  class={stack({
    gap: "lg",
    direction: "column",
    width: "28rem",
    maxWidth: "100%",
  })}
>
  <InputRange
    variant="track"
    aria-label="Value"
    bind:value={volume}
    min={0}
    max={100}
    step={20}
    marks
    fullWidth
  ></InputRange>

  <InputRange
    variant="track"
    aria-label="Speed"
    bind:value={quality}
    min={0}
    max={100}
    step={25}
    marks={[
      { value: 0, label: "Faster" },
      { value: 100, label: "Smarter" },
    ]}
    showValue
    fullWidth
  ></InputRange>
</div>

FasterSmarter

<script setup lang="ts">
// GENERATED from packages/demos/input-range/marks.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const quality = ref(50);
const volume = ref(40);
</script>

<template>
  <div
    :class="
      stack({
        gap: 'lg',
        direction: 'column',
        width: '28rem',
        maxWidth: '100%',
      })
    "
  >
    <InputRange
      variant="track"
      aria-label="Value"
      :value="volume"
      :onInput="
        (e: Event) => (volume = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="100"
      :step="20"
      :marks="true"
      :fullWidth="true"
    ></InputRange>

    <InputRange
      variant="track"
      aria-label="Speed"
      :value="quality"
      :onInput="
        (e: Event) => (quality = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="100"
      :step="25"
      :marks="[
        { value: 0, label: 'Faster' },
        { value: 100, label: 'Smarter' },
      ]"
      :showValue="true"
      :fullWidth="true"
    ></InputRange>
  </div>
</template>

FasterSmarter

// GENERATED from packages/demos/input-range/marks.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";

export default function MarksDemo() {
  const [quality, setQuality] = createSignal(50);
  const [volume, setVolume] = createSignal(40);
  return (
    <div
      class={stack({
        gap: "lg",
        direction: "column",
        width: "28rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        variant="track"
        aria-label="Value"
        value={volume()}
        onInput={(e) => setVolume(Number(e.currentTarget.value))}
        min={0}
        max={100}
        step={20}
        marks
        fullWidth
      />

      <InputRange
        variant="track"
        aria-label="Speed"
        value={quality()}
        onInput={(e) => setQuality(Number(e.currentTarget.value))}
        min={0}
        max={100}
        step={25}
        marks={[
          { value: 0, label: "Faster" },
          { value: 100, label: "Smarter" },
        ]}
        showValue
        fullWidth
      />
    </div>
  );
}

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.

PreviewCode

Faster

Smarter

---
// GENERATED from packages/demos/input-range/stepped.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "lg",
    direction: "column",
    width: "28rem",
    maxWidth: "100%",
  })}
>
  <InputRange
    variant="track"
    aria-label="Speed"
    value={50}
    min={0}
    max={100}
    step={25}
    appearance="stepped"
    marks
    fullWidth
  >
    <span slot="field-prefix">Faster</span>
    <span slot="field-suffix">Smarter</span>
  </InputRange>
</div>

Faster

Smarter

// GENERATED from packages/demos/input-range/stepped.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
import { stack } from "@pindoba/styled-system/patterns";

export default function SteppedDemo() {
  const [effort, setEffort] = useState(50);
  return (
    <div
      className={stack({
        gap: "lg",
        direction: "column",
        width: "28rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        variant="track"
        aria-label="Speed"
        value={effort}
        onChange={(e) => setEffort(Number(e.currentTarget.value))}
        min={0}
        max={100}
        step={25}
        appearance="stepped"
        marks
        fullWidth
        fieldPrefix={<span>Faster</span>}
        fieldSuffix={<span>Smarter</span>}
      />
    </div>
  );
}

Faster

Smarter

<script lang="ts">
  // GENERATED from packages/demos/input-range/stepped.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import { stack } from "@pindoba/styled-system/patterns";

  let effort = $state(50);
</script>

<div
  class={stack({
    gap: "lg",
    direction: "column",
    width: "28rem",
    maxWidth: "100%",
  })}
>
  <InputRange
    variant="track"
    aria-label="Speed"
    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">
// GENERATED from packages/demos/input-range/stepped.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { InputRange } from "@pindoba/vue-input-range";
import { stack } from "@pindoba/styled-system/patterns";

const effort = ref(50);
</script>

<template>
  <div
    :class="
      stack({
        gap: 'lg',
        direction: 'column',
        width: '28rem',
        maxWidth: '100%',
      })
    "
  >
    <InputRange
      variant="track"
      aria-label="Speed"
      :value="effort"
      :onInput="
        (e: Event) => (effort = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="100"
      :step="25"
      appearance="stepped"
      :marks="true"
      :fullWidth="true"
    >
      <template #fieldPrefix>
        <span>Faster</span>
      </template>
      <template #fieldSuffix>
        <span>Smarter</span>
      </template>
    </InputRange>
  </div>
</template>

Faster

Smarter

// GENERATED from packages/demos/input-range/stepped.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";

export default function SteppedDemo() {
  const [effort, setEffort] = createSignal(50);
  return (
    <div
      class={stack({
        gap: "lg",
        direction: "column",
        width: "28rem",
        maxWidth: "100%",
      })}
    >
      <InputRange
        variant="track"
        aria-label="Speed"
        value={effort()}
        onInput={(e) => setEffort(Number(e.currentTarget.value))}
        min={0}
        max={100}
        step={25}
        appearance="stepped"
        marks
        fullWidth
        fieldPrefix={<span>Faster</span>}
        fieldSuffix={<span>Smarter</span>}
      />
    </div>
  );
}

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.

PreviewCode

Level: 25

0102560100

---
// GENERATED from packages/demos/input-range/snap.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

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

const level = 25;
---

<div
  class={stack({
    gap: "sm",
    direction: "column",
    width: "28rem",
    maxWidth: "100%",
  })}
  data-ir-root="input-range/snap"
>
  <span class={css({ fontSize: "sm", color: "neutral.text.muted" })}>
    Level: <!--ir:1-->
    {level}
    <!--/ir-->
  </span>
  <InputRange
    variant="track"
    aria-label="Value"
    value={25}
    min={0}
    max={100}
    step="any"
    snap
    marks={stops.map((value) => ({ value, label: String(value) }))}
    fullWidth
    data-ir="2"
  />
</div>

<script>
  import { hydrate } from "./_client/snap.ts";

  document
    .querySelectorAll('[data-ir-root="input-range/snap"]')
    .forEach((root) => hydrate([root]));
</script>

Level: 25

0102560100

// GENERATED from packages/demos/input-range/snap.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
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",
        width: "28rem",
        maxWidth: "100%",
      })}
    >
      <span className={css({ fontSize: "sm", color: "neutral.text.muted" })}>
        Level: {level}
      </span>
      <InputRange
        variant="track"
        aria-label="Value"
        value={level}
        onChange={(e) => setLevel(Number(e.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">
  // GENERATED from packages/demos/input-range/snap.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

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

  let level = $state(25);
</script>

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

Level: 25

0102560100

<script setup lang="ts">
// GENERATED from packages/demos/input-range/snap.demo.tsx — edit the source, not this file.
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 stops = [0, 10, 25, 60, 100];

const level = ref(25);
</script>

<template>
  <div
    :class="
      stack({
        gap: 'sm',
        direction: 'column',
        width: '28rem',
        maxWidth: '100%',
      })
    "
  >
    <span :class="css({ fontSize: 'sm', color: 'neutral.text.muted' })"
      >Level: {{ level }}</span
    >
    <InputRange
      variant="track"
      aria-label="Value"
      :value="level"
      :onInput="
        (e: Event) => (level = Number((e.target as HTMLInputElement).value))
      "
      :min="0"
      :max="100"
      step="any"
      :snap="true"
      :marks="stops.map((value) => ({ value, label: String(value) }))"
      :fullWidth="true"
    ></InputRange>
  </div>
</template>

Level: 25

0102560100

// GENERATED from packages/demos/input-range/snap.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
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] = createSignal(25);
  return (
    <div
      class={stack({
        gap: "sm",
        direction: "column",
        width: "28rem",
        maxWidth: "100%",
      })}
    >
      <span class={css({ fontSize: "sm", color: "neutral.text.muted" })}>
        Level: {level()}
      </span>
      <InputRange
        variant="track"
        aria-label="Value"
        value={level()}
        onInput={(e) => setLevel(Number(e.currentTarget.value))}
        min={0}
        max={100}
        step="any"
        snap
        marks={stops.map((value) => ({ value, label: String(value) }))}
        fullWidth
      />
    </div>
  );
}

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.

PreviewCode

Wrapped in a surface via passThrough

Squared thumb via passThrough

Forwarded ARIA attributes

Opacity

50%

---
// GENERATED from packages/demos/input-range/custom.demo.tsx — edit the source, not this file.
import InputRange from "@pindoba/astro-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const opacity = 50;
---

<div
  class={stack({ gap: "xl", direction: "column" })}
  data-ir-root="input-range/custom"
>
  <div>
    <h3>Wrapped in a surface via passThrough</h3>
    <InputRange
      variant="track"
      aria-label="Custom surface"
      value={40}
      min={0}
      max={100}
      fullWidth
      passThrough={{
        root: {
          style: {
            background: "neutral.surface.hill",
            borderRadius: "md",
            padding: "md",
          },
        },
      }}
      data-ir="1"
    />
  </div>

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

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

<script>
  import { hydrate } from "./_client/custom.ts";

  document
    .querySelectorAll('[data-ir-root="input-range/custom"]')
    .forEach((root) => hydrate([root]));
</script>

Wrapped in a surface via passThrough

Squared thumb via passThrough

Forwarded ARIA attributes

Opacity

50%

// GENERATED from packages/demos/input-range/custom.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { InputRange } from "@pindoba/react-input-range";
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
          variant="track"
          aria-label="Custom surface"
          value={wrapped}
          onChange={(e) => setWrapped(Number(e.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
          variant="track"
          aria-label="Squared thumb"
          value={squared}
          onChange={(e) => setSquared(Number(e.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
          variant="track"
          value={opacity}
          onChange={(e) => setOpacity(Number(e.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">
  // GENERATED from packages/demos/input-range/custom.demo.tsx — edit the source, not this file.
  import InputRange from "@pindoba/svelte-input-range";
  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
      variant="track"
      aria-label="Custom surface"
      bind:value={wrapped}
      min={0}
      max={100}
      fullWidth
      passThrough={{
        root: {
          style: {
            background: "neutral.surface.hill",
            borderRadius: "md",
            padding: "md",
          },
        },
      }}
    ></InputRange>
  </div>

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

  <div>
    <h3>Forwarded ARIA attributes</h3>
    <InputRange
      variant="track"
      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">
// GENERATED from packages/demos/input-range/custom.demo.tsx — edit the source, not this file.
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 wrapped = ref(40);
const squared = ref(65);
const opacity = ref(50);
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div>
      <h3>Wrapped in a surface via passThrough</h3>
      <InputRange
        variant="track"
        aria-label="Custom surface"
        :value="wrapped"
        :onInput="
          (e: Event) => (wrapped = Number((e.target as HTMLInputElement).value))
        "
        :min="0"
        :max="100"
        :fullWidth="true"
        :passThrough="{
          root: {
            style: {
              background: 'neutral.surface.hill',
              borderRadius: 'md',
              padding: 'md',
            },
          },
        }"
      ></InputRange>
    </div>

    <div>
      <h3>Squared thumb via passThrough</h3>
      <InputRange
        variant="track"
        aria-label="Squared thumb"
        :value="squared"
        :onInput="
          (e: Event) => (squared = Number((e.target as HTMLInputElement).value))
        "
        :min="0"
        :max="100"
        :fullWidth="true"
        :passThrough="{
          input: {
            style: {
              '&::-webkit-slider-thumb': { borderRadius: 'xs' },
              '&::-moz-range-thumb': { borderRadius: 'xs' },
            },
          },
        }"
      ></InputRange>
    </div>

    <div>
      <h3>Forwarded ARIA attributes</h3>
      <InputRange
        variant="track"
        :value="opacity"
        :onInput="
          (e: Event) => (opacity = Number((e.target as HTMLInputElement).value))
        "
        :min="0"
        :max="100"
        :fullWidth="true"
        labelPosition="top"
        :passThrough="{
          input: {
            props: {
              'aria-label': 'Opacity',
              'data-testid': 'opacity-slider',
            },
          },
        }"
      >
        <template #fieldPrefix>
          <span :class="css({ fontWeight: 'medium' })">Opacity</span>
        </template>
        <template #fieldSuffix>
          <span :class="css({ textAlign: 'right' })">{{ opacity }}%</span>
        </template>
      </InputRange>
    </div>
  </div>
</template>

Wrapped in a surface via passThrough

Squared thumb via passThrough

Forwarded ARIA attributes

Opacity

50%

// GENERATED from packages/demos/input-range/custom.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { InputRange } from "@pindoba/solid-input-range";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function CustomDemo() {
  const [wrapped, setWrapped] = createSignal(40);
  const [squared, setSquared] = createSignal(65);
  const [opacity, setOpacity] = createSignal(50);
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Wrapped in a surface via passThrough</h3>
        <InputRange
          variant="track"
          aria-label="Custom surface"
          value={wrapped()}
          onInput={(e) => setWrapped(Number(e.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
          variant="track"
          aria-label="Squared thumb"
          value={squared()}
          onInput={(e) => setSquared(Number(e.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
          variant="track"
          value={opacity()}
          onInput={(e) => setOpacity(Number(e.currentTarget.value))}
          min={0}
          max={100}
          fullWidth
          labelPosition="top"
          passThrough={{
            input: {
              props: {
                "aria-label": "Opacity",
                "data-testid": "opacity-slider",
              },
            },
          }}
          fieldPrefix={
            <span class={css({ fontWeight: "medium" })}>Opacity</span>
          }
          fieldSuffix={
            <span class={css({ textAlign: "right" })}>{opacity()}%</span>
          }
        />
      </div>
    </div>
  );
}

#Fader

#Label inside the row

#Label and value above or below

#Formatting the readout

#Track variant

#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

Fader

Label inside the row

Label and value above or below

Formatting the readout

Track variant

Feedback

Size

Prefix & Suffix

Dual Range

Tick Marks

Stepped

Snap to Marks

Custom Styling