Range

Overview

The Range component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.

Why this exists

Range sliders let users select a numeric value within a known bounds through direct manipulation. They are more intuitive than typing a number when the exact value is not critical.

Mental model

When to use

When not to use

Basic example

The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.

import { useState } from 'react';
import { Range, RangeDual } from '@byteion/react';

export default function RangeDemo() {
  const [volume, setVolume] = useState(50);
  const [price, setPrice] = useState<[number, number]>([20, 80]);
  return (
    <div className="space-y-6 p-6">
      <Range label="Volume" value={volume} onChange={setVolume} min={0} max={100} />
      <Range label="Brightness" defaultValue={75} showValue />
      <RangeDual label="Price range" value={price} onChange={setPrice} min={0} max={100} />
    </div>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Range, RangeDual } from '@byteion/vue';

const volume = ref(50);
const price = ref<[number, number]>([20, 80]);
</script>

<template>
  <div class="space-y-6 p-6">
    <Range v-model="volume" label="Volume" :min="0" :max="100" />
    <Range label="Brightness" :model-value="75" show-value />
    <RangeDual v-model="price" label="Price range" :min="0" :max="100" />
  </div>
</template>

States

This component reacts seamlessly to the following interaction and data states:

• idle — idle state.
• disabled — Non-interactive — grayed out, cursor not-allowed.
• default — Resting appearance before interaction.
• hover — Pointer is over the element — visual feedback via color or shadow.
• focus — Keyboard or tab focus — shows ring indicator for accessibility.
• active — Currently selected or in use.

Anatomy

Usage guidelines

• Always show the current numeric value.
• Set sensible min, max, and step.
• Use for approximate, not exact, selection.

Do and Don't

Accessibility

Uses <input type="range"> with aria-valuemin, aria-valuemax, aria-valuenow. Arrow keys adjust by step.

Customization

Track and thumb colors are customizable via CSS variables.

import { cva, cn, type VariantProps } from '@byteion/react';

const myRange = cva('base classes…', {
 variants: {
  accent: { soft:'border-primary-200', loud:'border-primary-500' },
 },
 defaultVariants: { accent:'soft' },
});

type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myRange>;

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';

interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();

const myRange = cva('base classes…', {
  variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});

const cls = computed(() => myRange({ accent: props.accent, class: attrs.class as string | undefined }));
</script>

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX

API Reference

Native range input.

export interface RangeProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'size'> {
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  /** Visible label rendered above the slider. */
  label?: ReactNode;
  /** Optional value display rendered next to the label. */
  showValue?: boolean | ((value: number) => ReactNode);
  /** Accent tone. */
  tone?: keyof typeof ACCENT;
  /** Optional step labels rendered below the input (stepped variant). */
  steps?: ReactNode[];
  /** Optional value suffix (e.g. "%"). */
  suffix?: string;
}

export interface RangeProps {
  /** Controlled value. */
  modelValue?: number;
  /** Initial value when uncontrolled. */
  defaultValue?: number;
  min?: number;
  max?: number;
  step?: number;
  /** Visible label rendered above the slider. */
  label?: string;
  /** Show numeric value badge next to the label. */
  showValue?: boolean;
  /** Accent tone. */
  tone?: RangeTone;
  /** Optional step labels rendered below the input (stepped variant). */
  steps?: string[];
  /** Optional value suffix (e.g. "%"). */
  suffix?: string;
  id?: string;
}

Developer tips

Common mistakes

Production usage tips

Premium examples

Advanced patterns available in Byteion Pro:

Related components

• Input