Slider

Sliders let users select a value from a range along a track. They're ideal for settings like volume, brightness, or image filters.

Source Code

uikit-react-core

Controlled

HvSlider can be controlled with the values/onChange props.

Adding a second value to the values prop will make the slider a range slider, which also makes the track draggable.

Failure Rate

—

04080120160200

import { useState } from "react";


export default function Demo() {
  const [values, setValues] = useState([40, 80]);


  return (
    <>
      <HvSlider
        label="Failure Rate"
        values={values}
        onChange={setValues}
        minPointValue={0}
        maxPointValue={200}
      />
      <br />
      <div className="flex gap-xs">
        <HvButton
          variant="subtle"
          onClick={() => setValues(values.map((v) => v - 10))}
        >
          Decrement
        </HvButton>
        <HvButton
          variant="subtle"
          onClick={() => setValues(values.map((v) => v + 10))}
        >
          Increment
        </HvButton>
      </div>
    </>
  );
}

import { useState } from "react";

export default function Demo() {
  const [values, setValues] = useState([40, 80]);

  return (
    <>
      <HvSlider
        label="Failure Rate"
        values={values}
        onChange={setValues}
        minPointValue={0}
        maxPointValue={200}
      />
      <br />
      <div className="flex gap-xs">
        <HvButton
          variant="subtle"
          onClick={() => setValues(values.map((v) => v - 10))}
        >
          Decrement
        </HvButton>
        <HvButton
          variant="subtle"
          onClick={() => setValues(values.map((v) => v + 10))}
        >
          Increment
        </HvButton>
      </div>
    </>
  );
}

Customization

Use minPointValue, maxPointValue, divisionQuantity, and markStep to customize the slider limits and steps, and formatMark and formatTooltip to customize the step labels.

Severity

Very LowLowMediumHighVery High

export default function Demo() {
  return (
    <HvSlider
      label="Severity"
      hideInput
      defaultValues={[3]}
      // step customization
      minPointValue={1}
      maxPointValue={5}
      divisionQuantity={4}
      markStep={1}
      // label customization
      formatMark={getLabel}
      formatTooltip={getLabel}
    />
  );
}


function getLabel(label: string) {
  const labels = ["Very Low", "Low", "Medium", "High", "Very High"];
  return labels[Number(label) - 1];
}

export default function Demo() {
  return (
    <HvSlider
      label="Severity"
      hideInput
      defaultValues={[3]}
      // step customization
      minPointValue={1}
      maxPointValue={5}
      divisionQuantity={4}
      markStep={1}
      // label customization
      formatMark={getLabel}
      formatTooltip={getLabel}
    />
  );
}

function getLabel(label: string) {
  const labels = ["Very Low", "Low", "Medium", "High", "Very High"];
  return labels[Number(label) - 1];
}

HvFormElement

Slider

Controlled

Customization

Related components