Slider

The Slider component allows the user to select a value from a defined range. Either by using continuous slider, stepped slider or buffered slider.

Import

React

// with @dhl-official/react-library:
import { DhlSlider } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlSlider } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-slider></dhl-slider>

Vue.js

// with @dhl-official/vue-library:
import { DhlSlider } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlSlider } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlSlider></DhlSlider>

Angular

<dhl-slider></dhl-slider>

Vue.js

<dhl-slider></dhl-slider>

Interactive Demo

Migrating to DUIL 1.0

• Remove validation
• Remove isBlock
• Rename color to colorVariant
• Rename disabled to isDisabled
• Steps can now be used without graphic indicator - to toggle, use showStep/show-step

Readme

Usage

Dhl-slider

Snippets of code in HTML and JavaScript to show some of the use cases for the component. The code is not meant to be executed, but to be used as a reference for the usage of the component.
Angular, React and Vue usages are not included in this documentation, but can be easily derived from the HTML and JavaScript code.

default usage

<form novalidate>
  <dhl-slider name="slider-1"></dhl-slider>

  <dhl-button
    type="reset"
    variant="outline"
    >reset</dhl-button
  >
  <dhl-button type="submit">submit</dhl-button>
</form>

<script>
  const form = document.querySelector("form");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    console.log(Object.fromEntries(new FormData(form)));
    return await form.checkValidity();
  });
</script>

usage with set min/max values and step

<form novalidate>
  <dhl-slider
    name="slider-1"
    min="25"
    max="75"
    step="5"
  ></dhl-slider>

  <dhl-button
    type="reset"
    variant="outline"
    >reset</dhl-button
  >
  <dhl-button type="submit">submit</dhl-button>
</form>

<dhl-text is-paragraph>Min: <span id="min"></span></dhl-text>
<dhl-text is-paragraph>Max: <span id="max"></span></dhl-text>
<dhl-text is-paragraph>Step: <span id="step"></span></dhl-text>
<dhl-text is-paragraph>Value: <span id="value"></span></dhl-text>

<script>
  const form = document.querySelector("form");
  const slider = document.querySelector("dhl-slider");

  const min = document.querySelector("#min");
  const max = document.querySelector("#max");
  const step = document.querySelector("#step");
  const value = document.querySelector("#value");

  min.innerHTML = slider.getAttribute("min");
  max.innerHTML = slider.getAttribute("max");
  step.innerHTML = slider.getAttribute("step");
  value.innerHTML = slider.getAttribute("value");

  slider.addEventListener("dhlChange", (e) => {
    value.innerHTML = e.detail.value;
  });

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    console.log(Object.fromEntries(new FormData(form)));
    return await form.checkValidity();
  });
</script>

usage with custom events

<form novalidate>
  <dhl-slider name="slider-1"></dhl-slider>

  <dhl-button
    type="reset"
    variant="outline"
    >reset</dhl-button
  >
  <dhl-button type="submit">submit</dhl-button>
</form>

<script>
  const form = document.querySelector("form");
  const slider = document.querySelector("dhl-slider");

  slider.addEventListener("dhlChange", async (e) => {
    console.log(e.type, e.target.value);
  });

  slider.addEventListener("dhlFocus", async (e) => {
    console.log(e.type, e.target.value);
  });

  slider.addEventListener("dhlBlur", async (e) => {
    console.log(e.type, e.target.value);
  });

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    console.log(Object.fromEntries(new FormData(form)));
    return await form.checkValidity();
  });
</script>

Properties

Property	Attribute	Description	Type	Default
buffer	buffer	An optional prop to assign an intermediate value between min and max which cannot be exceeded.	number	undefined
colorVariant	color-variant	An optional prop to assign the color variant of the slider.	"black" \| "gray" \| "red" \| "white" \| "yellow"	DHL_SLIDER.COLOR_VARIANT.RED
dataAriaDescribedby	data-aria-describedby	An optional prop defining the list of reference IDs (separated by spaces), recommended when you want to an error message on your field.	string	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataAriaLabelledby	data-aria-labelledby	An optional ariaLabelledby prop that establishes the relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labelling. List multiple element IDs in a space delimited fashion.	string	undefined
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-slider-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
max	max	An optional prop that sets the maximum number that thumb position can attain.	number	100
min	min	An optional prop that sets the minimum number that thumb position can attain.	number	0
name	name	An optional value to be set to the element HTML name attribute. It takes any valid value that can be used for the name attribute of an HTMLInputElement.	string	undefined
secondThumbPosition	second-thumb-position	An optional prop defining the second thumb position which is taken when a form is submitted.	number	0
showStep	show-step	An optional prop used to toggle if step markers should be visible	boolean	false
showTooltip	show-tooltip	An optional prop to show tooltip with current thumb position.	boolean	true
step	step	An optional prop to assign a multiple by which the thumb position is incremented by.	number	1
thumbPosition	thumb-position	An optional prop defining the thumb position which is taken when a form is submitted.	number	0
variant	variant	An optional prop to select a component design variant.	DhlSliderVariant.HORIZONTAL \| DhlSliderVariant.SPAN \| DhlSliderVariant.VERTICAL	DhlSliderVariant.HORIZONTAL
verticalVariantHeight	vertical-variant-height	An optional prop to set component height.	number	DHL_SLIDER_VERTICAL_VARIANT_HEIGHT

Events

Event	Description	Type
dhlBlur	Event emitted when the component loses focus.	CustomEvent<FocusEvent>
dhlChange	Event emitted when the input field changes value.	CustomEvent<{ thumbPosition?: number; secondThumbPosition?: number; }>
dhlFocus	Event emitted when the component receives focus.	CustomEvent<FocusEvent>
dhlInput	Event emitted when the component receives an input event	CustomEvent<{ thumbPosition?: number; secondThumbPosition?: number; }>

---

Built by DHL User Interface Library Team!