fn-design-system/components/slider.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
slider	component	ts	ui	1.0.0	impure	Slider(props: SliderProps): JSX.Element | RangeSlider(props: RangeSliderProps): JSX.Element	Deslizador de valor numérico con marcas, labels y modo rango. Incluye RangeSlider. Wrapper sobre Mantine Slider.	slider range input numeric component ui mantine				false		@mantine/core	Componente Slider para selección de un valor numérico en un rango, o RangeSlider para selección de un intervalo [min, max]	false			frontend/functions/ui/slider.tsx	name type required description min number false Valor mínimo del rango (por defecto 0) name type required description max number false Valor máximo del rango (por defecto 100) name type required description step number false Incremento por paso al deslizar name type required description marks { value: number; label?: string }[] false Marcas en el track con etiquetas opcionales name type required description value number false Valor actual del slider (controlled) — para RangeSlider es [number, number] name type required description onChange (value: number) => void false Callback mientras se arrastra — para RangeSlider recibe [number, number] name type required description onChangeEnd (value: number) => void false Callback al soltar el slider — para RangeSlider recibe [number, number] name type required description label string | ((value: number) => string) | null false Tooltip sobre el thumb — función para formatear el valor name type required description labelAlwaysOn boolean false Muestra el label siempre visible, no solo al hover name type required description disabled boolean false Deshabilita la interacción name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Grosor del track y tamaño del thumb name type required description color string false Color del track activo y el thumb	onChange onChangeEnd	true	react	default range

Ejemplo

import { Slider, RangeSlider } from '@fn_library'

// Slider básico
<Slider
  value={volume}
  onChange={setVolume}
  min={0}
  max={100}
  step={5}
/>

// Con marcas y label formateado
<Slider
  value={price}
  onChange={setPrice}
  min={0}
  max={1000}
  step={50}
  label={(v) => `$${v}`}
  labelAlwaysOn
  marks={[
    { value: 0, label: '$0' },
    { value: 500, label: '$500' },
    { value: 1000, label: '$1000' },
  ]}
/>

// RangeSlider para seleccionar intervalo
<RangeSlider
  value={priceRange}
  onChange={setPriceRange}
  min={0}
  max={500}
  onChangeEnd={(range) => fetchProducts(range)}
/>

Notas

• Wrapper directo sobre Slider y RangeSlider de @mantine/core v9. Todas las props de Mantine son válidas.
• RangeSlider recibe y emite [number, number] en lugar de number.
• Usar onChangeEnd para operaciones costosas (fetch, cálculos) y onChange solo para actualizar UI.
• label={null} desactiva el tooltip completamente.