Slider

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Source Code

uikit-react-core

Value

0102030405060708090100

label

required

readOnly

disabled

hideInput

markStep

divisionQuantity

minPointValue

maxPointValue

<HvSlider 
  label="Value"
  required={false}
  readOnly={false}
  disabled={false}
  hideInput={false}
  markStep={10}
  divisionQuantity={100}
  minPointValue={0}
  maxPointValue={100}
  className="w-full"
  defaultValues={[10]}
/>

<HvSlider 
  label="Value"
  required={false}
  readOnly={false}
  disabled={false}
  hideInput={false}
  markStep={10}
  divisionQuantity={100}
  minPointValue={0}
  maxPointValue={100}
  className="w-full"
  defaultValues={[10]}
/>

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 (
    <div className="w-full">
      <HvSlider
        className="w-full"
        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>
    </div>
  );
}

import { useState } from "react";

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

  return (
    <div className="w-full">
      <HvSlider
        className="w-full"
        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>
    </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]}
      className="w-full"
      // 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]}
      className="w-full"
      // 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

Skeleton Snackbar

Slider

Controlled

Customization

Related components