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.

Code

Usage

Specifications

Props

Name	Default	Description
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	`0`	The minimum value available for selection.
maxValue: number	`100`	The maximum value available for selection.
step: number	`1`	The step interval between values available for selection.
showLimitsValues: boolean	`false`	Whether the min/max value labels should be displayed next to the slider.
showInput: boolean	`false`	Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
disabled: boolean	`false`	If true, the component will be disabled.
marks: boolean	`false`	Whether the marks between each step should be shown or not.
onChange: function		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: function		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: function		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: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
size: string	`'fillParent'`	Size of the component ('medium' \| 'large' \| 'fillParent').
tabIndex: number	`0`	Value of the tabindex attribute.
ref: object		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

Sidenav