Skip to main content
Browse docs

Marwes documentation

Slider

Continuous-value input family with a native range slider component, a canonical SliderField path, and thin purpose-slider wrappers.

What this family solves

Continuous-value input family with a native range slider component, a canonical SliderField path, and thin purpose-slider wrappers.

Use when

  • The UI needs a continuous or stepped numeric control with visible labeling, optional description, and optional error support.
  • The product flow maps clearly to VolumeSlider, BrightnessSlider, or RadiusSlider and benefits from self-documenting purpose metadata.
  • The team wants React and Vue slider behavior to stay aligned through one native-first core recipe and one shared contract file.

Avoid when

  • A different control such as radio, segmented control, tabs, or direct numeric input is the more honest interaction model.
  • The implementation cannot own visible labeling or described-by wiring while using the SliderField escape hatch.
  • The team expects dual-thumb ranges, non-native slider semantics, or richer value presentation that this family does not currently define.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

BrightnessSlider, RadiusSlider, SliderField, VolumeSlider

Types

BrightnessSliderProps, RadiusSliderProps, SliderFieldProps, VolumeSliderProps

Vue — @marwes-ui/vue

Components

BrightnessSlider, RadiusSlider, SliderField, VolumeSlider

Types

BrightnessSliderProps, RadiusSliderProps, SliderFieldProps, VolumeSliderProps

Svelte — @marwes-ui/svelte

Components

BrightnessSlider, RadiusSlider, SliderField, VolumeSlider

Types

BrightnessSliderProps, RadiusSliderProps, SliderFieldProps, VolumeSliderProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { SliderField } from "@marwes-ui/react"

export function Example() {
  return (
    <SliderField
      label="Volume"
      description="Adjust media volume"
      slider={{ min: 0, max: 100, step: 1, defaultValue: 40 }}
    />
  )
}

Vue

<script setup lang="ts">
import { SliderField } from "@marwes-ui/vue"
</script>

<template>
  <SliderField
    label="Volume"
    description="Adjust media volume"
    :slider="{ min: 0, max: 100, step: 1, defaultValue: 40 }"
  />
</template>

Svelte

<script lang="ts">
  import { SliderField } from "@marwes-ui/svelte"
</script>

<SliderField
  label="Volume"
  description="Adjust media volume"
  slider={{ min: 0, max: 100, step: 1, defaultValue: 40 }}
/>

Accessibility requirements

  • Value range labeling: Provide clear min and max value labels so the numeric range is understood without a screen.
  • Keyboard range control: Verify keyboard arrow-key, Home, and End behavior sets the value the same way pointer input does.
  • Connected field wiring: Use the public Field component so labels, helper text, errors, and invalid state stay connected.
  • Manual review boundary: Real browser and assistive-technology validation for announcement quality, focus feel, and native range interaction expectations.
  • Manual review 2: Future decisions about which slider stories should join stricter automated accessibility gates.
  • Manual review 3: Whether future keyboard-proof coverage should go beyond the current native smoke-contract boundary.

Theming

Slider uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources