Rango.

<div class="ui-sample ui-range"><div><label for="range-0">Opacidad de la capa</label><output for="range-0">40%</output></div><input id="range-0" type="range" min="0" max="100" value="40" step="10"></div>

<div class="ui-sample ui-range border border-slate-300 bg-white p-4 text-slate-950"><div><label for="range-0">Opacidad de la capa</label><output for="range-0">40%</output></div><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="range-0" type="range" min="0" max="100" value="40" step="10"></div>

import type { ChangeEventHandler } from "react";

export interface RangeProps {
  /** Etiqueta visible del control. */
  label?: string;
  /** Id del control; el valor mostrado lo referencia con `for`. Usa uno distinto por control en la página. */
  id?: string;
  name?: string;
  min?: number;
  max?: number;
  step?: number;
  /** Valor inicial de un control no controlado. */
  defaultValue?: number;
  /** Valor de un control controlado; va junto con `onChange`. */
  value?: number;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Unidad que sigue al valor mostrado. */
  unit?: string;
  /** Texto del valor mostrado; reemplaza al número con su unidad. */
  valueText?: string;
  disabled?: boolean;
  className?: string;
}

/**
 * Deslizador con etiqueta y valor visible, para ajustar un número dentro de un intervalo sin exigir precisión.
 *
 * El valor mostrado sale de `value` o `defaultValue` con `unit`; para que siga al deslizador, úsalo controlado.
 *
 * @example <Range id="opacidad" label="Opacidad de la capa" value={opacidad} onChange={(e) => setOpacidad(Number(e.target.value))} />
 * @example <Range id="radio" label="Radio de búsqueda" min={1} max={20} step={1} defaultValue={5} unit=" km" />
 */
export function Range({
  label = "Opacidad de la capa",
  id = "range-0",
  name,
  min = 0,
  max = 100,
  step = 10,
  defaultValue = 40,
  value,
  onChange,
  unit = "%",
  valueText,
  disabled,
  className,
}: RangeProps) {
  const controlado = value !== undefined && onChange !== undefined;
  const actual = value ?? defaultValue;
  return (
    <div className={["ui-range", className].filter(Boolean).join(" ")}>
      <div>
        <label htmlFor={id}>{label}</label>
        <output htmlFor={id}>{valueText ?? `${actual}${unit}`}</output>
      </div>
      <input
        id={id}
        name={name}
        type="range"
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        onChange={onChange}
        {...(controlado ? { value } : { defaultValue: actual })}
      />
    </div>
  );
}