DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Slider

Slider control enables users to select a specific value from a predefined set by dragging a thumb along a track.

Overview
Code

Props

NameTypeDescriptionDefault
ariaLabelstringSpecifies a string to be used as the name for the slider element when no label is provided.'Slider'
defaultValuenumberInitial value of the slider, only when it is uncontrolled.0
disabledbooleanIf true, the component will be disabled.false
helperTextstringHelper text to be placed above the slider.-
labelstringText to be placed above the slider.-
labelFormatCallback(value: number) => stringThis function will be used to format the labels displayed next to the slider. The value will be passed as parameter and the function must return the formatted value.-
namestringName attribute of the input element.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
marksbooleanWhether the marks between each step should be shown or not.false
maxValuenumberThe maximum value available for selection.100
minValuenumberThe minimum value available for selection.0
onChange(value: number) => voidThis function will be called when the slider changes its value, as it's being dragged. The new value will be passed as a parameter when this function is executed.-
onDragEnd(value: number) => voidThis function will be called when the slider changes its value, but only when the thumb is released. The new value will be passed as a parameter when this function is executed.-
refReact.Ref<HTMLDivElement>Reference to the component.-
showInputbooleanWhether the input element for displaying/controlling the slider value should be displayed next to the slider.false
showLimitsValuesbooleanWhether the min/max value labels should be displayed next to the slider.false
size'medium' | 'large' | 'fillParent'Size of the component.'fillParent'
stepnumberThe step interval between values available for selection.1
valuenumberThe selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.-

Examples

Controlled

() => {
  const [value, changeValue] = useState(25);
  const onChange = (newValue) => {
    changeValue(newValue);
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcSlider
        label="Select a value"
        value={value}
        onChange={onChange}
      />
    </DxcInset>
  );
}

Uncontrolled

() => {
  const sliderRef = useRef();

  const handleSubmit = () => {
    const slider = sliderRef.current.getElementsByTagName("input")[0];
    console.log(slider.value);
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
        <DxcSlider
          label="Select a value"
          defaultValue={40}
          ref={sliderRef}
        />
        <DxcButton label="Submit" type="submit" onClick={handleSubmit} />
      </DxcFlex>
    </DxcInset>
  );
}

Format label

() => {
  const [value, changeValue] = useState(25);
  const onChange = (newValue) => {
    changeValue(newValue);
  };
  const labelFormat = (value) => {
    return `${value}°C`;
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcSlider
        label="Select a value"
        value={value}
        onChange={onChange}
        minValue={0}
        maxValue={100}
        showLimitsValues
        labelFormatCallback={labelFormat}
      />
    </DxcInset>
  );
}

Decimals and negatives

() => {
  const [value, changeValue] = useState(0);
  const onChange = (newValue) => {
    changeValue(newValue);
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcSlider 
        helperText="Help message"
        label="Slider"
        marks
        maxValue={1}
        minValue={-1}
        onChange={onChange}
        showInput
        showLimitsValues
        step={0.1}
        value={value}
      />
      <DxcParagraph>Current value: {value}</DxcParagraph>
    </DxcInset>
  );
}
On this page