Actions and forms

Slider

Native range input with bindable value and formatted output.

Live example

Use arrow keys for precise adjustments.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Slider } from "@cofob/design-system-react";

/**
 * Complete Slider parameter reference.
 * @param value/defaultValue
 *   type: number; controlled or initial value
 *   default: 0
 *   example: "overview"
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param min
 *   type: number
 *   default: 0
 *   example: {min}
 * @param max
 *   type: number
 *   default: 100
 *   example: {max}
 * @param step
 *   type: number
 *   default: 1
 *   example: {step}
 * @param showValue
 *   type: boolean
 *   default: true
 *   example: {showValue}
 * @param hint
 *   type: adapter-specific
 *   default: —
 *   example: {hint}
 * @param formatValue
 *   type: (value: number) => renderable content
 *   default: —
 *   example: {formatValue}
 * @param onValueChange
 *   type: (value: number) => void
 *   default: —
 *   example: {handleValueChange}
 * @param input attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function SliderExample() {
  return (
    <Slider label="Volume" defaultValue={60} />
  );
}

Svelte

<script lang="ts">
  import { Slider } from "@cofob/design-system-svelte";

  // Complete Slider parameter reference.
  // value/defaultValue
  //   type: number; controlled or initial value
  //   default: 0
  //   example: "overview"
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // min
  //   type: number
  //   default: 0
  //   example: {min}
  // max
  //   type: number
  //   default: 100
  //   example: {max}
  // step
  //   type: number
  //   default: 1
  //   example: {step}
  // showValue
  //   type: boolean
  //   default: true
  //   example: {showValue}
  // hint
  //   type: adapter-specific
  //   default: —
  //   example: {hint}
  // formatValue
  //   type: (value: number) => renderable content
  //   default: —
  //   example: {formatValue}
  // onValueChange
  //   type: (value: number) => void
  //   default: —
  //   example: {handleValueChange}
  // input attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Slider label="Volume" bind:value />

HTML

<!--
  Complete Slider parameter reference.
  value/defaultValue
    type: number; controlled or initial value
    default: 0
    example: "overview"
  label
    type: string | renderable content
    required
    example: "Accessible label"
  min
    type: number
    default: 0
    example: {min}
  max
    type: number
    default: 100
    example: {max}
  step
    type: number
    default: 1
    example: {step}
  showValue
    type: boolean
    default: true
    example: {showValue}
  hint
    type: adapter-specific
    default: —
    example: {hint}
  formatValue
    type: (value: number) => renderable content
    default: —
    example: {formatValue}
  onValueChange
    type: (value: number) => void
    default: —
    example: {handleValueChange}
  input attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<label class="cf-slider">Volume <input class="cf-slider__control" type="range" /></label>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-slider`
Adapters	Native · React · Svelte
Primary props	value/defaultValue · label · min · max · step · showValue · hint · formatValue · onValueChange · input attributes
Documented states	minimum · value · maximum · focus-visible · disabled
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`value/defaultValue`	`number; controlled or initial value`	`0`	React · Svelte · HTML	`"overview"`	Use the first form for controlled state and the second for initial state.
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`min`	`number`	`0`	React · Svelte · HTML	`{min}`	Lowest allowed range value.
`max`	`number`	`100`	React · Svelte · HTML	`{max}`	Highest allowed range or progress value.
`step`	`number`	`1`	React · Svelte · HTML	`{step}`	Increment used by the native range input.
`showValue`	`boolean`	`true`	React · Svelte · HTML	`{showValue}`	Shows formatted output beside the slider label.
`hint`	`adapter-specific`	`—`	React · Svelte · HTML	`{hint}`	Configures hint.
`formatValue`	`(value: number) => renderable content`	`—`	React · Svelte · HTML	`{formatValue}`	Formats visible numeric output without changing the underlying value.
`onValueChange`	`(value: number) => void`	`—`	React · Svelte · HTML	`{handleValueChange}`	Reports a user-driven tab or accordion value change.
`input attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.