User Interface / Components / Slider

Adopting Core Components

We have added new React components to the Audi CI to ensure a uniform appearance on the web. All existing React components can be found in the Audi React Library. Whilst the MVP is now available, Audi will continue to develop and add to this library.

Sliders allow the selection of a value or a value range on a given scale. The scale can contain steps or allow continuously variable selection. Values for selection on the scale can be communicated numerically or else by means of a text label.

The size of the slider depends on the basic type size used, which can adapt to the viewport width in question. As such, the size of the sliders is flexible. Sliders are available in black and white.

HTML

<div class="aui-slider aui-js-slider" data-min="0" data-max="100">
  <input type="hidden" class="aui-slider__hidden-field" value="50.00">
</div>

Audi UI Kit – Integration into Sketch library

To ensure designers are using the most up-to-date components in their products, the Audi UI Kit was created as a sketch library. Integrate this UI Kit to get the latest Audi Sketch Library. Updates will be made regularly and users will be informed when new versions of the Library are available.

Integrate Sketch library