Slider

Slider control allows users to select a specific value or a range of values from a set. Usually, slider presents a relatively large dataset and the way that the user interacts with it is helpful to explore the multiple options swiftly.

Props

Name	Type	Description	Default
defaultValue	`number`	Initial value of the slider, only when it is uncontrolled.	-
value	`number`	The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.	-
label	`string`	Text to be placed above the slider.	-
name	`string`	Name attribute of the input element.	-
helperText	`string`	Helper text to be placed above the slider.	-
minValue	`number`	The minimum value available for selection.	`0`
maxValue	`number`	The maximum value available for selection.	`100`
step	`number`	The step interval between values available for selection.	`1`
showLimitsValues	`boolean`	Whether the min/max value labels should be displayed next to the slider.	`false`
showInput	`boolean`	Whether the input element for displaying/controlling the slider value should be displayed next to the slider.	`false`
disabled	`boolean`	If true, the component will be disabled.	`false`
marks	`boolean`	Whether the marks between each step should be shown or not.	`false`
onChange	`(value: number) => void`	This 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) => void`	This 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.	-
labelFormatCallback	`(value: number) => string`	This 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.	-
margin	`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| Margin`	Size 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.	-
size	`'medium' \| 'large' \| 'fillParent'`	Size of the component.	`'fillParent'`
tabIndex	`number`	Value of the `tabindex` attribute.	`0`
ref	`React.Ref <HTMLDivElement>`	Reference to the component.	-

Examples

Controlled

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

  return (
    <DxcInset space="2rem">
      <DxcSlider
        label="Select a value"
        value={value}
        onChange={onChange}
      />
    </DxcInset>
  );
}

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

  return (
    <DxcInset space="2rem">
      <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="2rem">
      <DxcFlex direction="column" gap="2rem">
        <DxcSlider
          label="Select a value"
          defaultValue={40}
          ref={sliderRef}
        />
        <DxcButton label="Submit" type="submit" onClick={handleSubmit} />
      </DxcFlex>
    </DxcInset>
  );
}

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

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

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <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="2rem">
      <DxcSlider
        label="Select a value"
        value={value}
        onChange={onChange}
        minValue={0}
        maxValue={100}
        showLimitsValues={true}
        labelFormatCallback={labelFormat}
      />
    </DxcInset>
  );
}

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

  return (
    <DxcInset space="2rem">
      <DxcSlider
        label="Select a value"
        value={value}
        onChange={onChange}
        minValue={0}
        maxValue={100}
        showLimitsValues={true}
        labelFormatCallback={labelFormat}
      />
    </DxcInset>
  );
}

Props
Examples

Edit this page on GitHub

Report an issue on GitHub

Sidenav