Skip to main content
🏠FormSliderVersion: Next

Slider

Sliders are form elements with which users can set a value by dragging a cursor along a bar. It uses a knob or lever moved horizontally to control a variable, such as volume on a radio or brightness on a screen.

Disclaimer

This document CSS shows how to write the HTML and CSS to style the default visual slider. You need to add additional functions in Javascript in order to set min, max, step, marks for slider, and to control position of slider handles if you tend to implement a complete slider using HTML, JS and CSS without using a framework.

Therefore, we invite you to consult the Slider documents in Angular/ React/ Vue/ Web-components that show you how to easily create and control a Quantum slider.

<div class="qtm-slider-container">
  <div class="qtm-slider">
    <div class="qtm-slider-track"></div>
    <div class="qtm-slider-lead"></div>
    <div class="qtm-tooltip">
      <div class="qtm-slider-handle" tabindex="0"></div>
      <div class="qtm-tooltip-container">0</div>
    </div>
  </div>
</div>

Sizes​

Sliders are available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default the slider is medium.

Small
Medium
Large
<div class="qtm-slider-container qtm-small">
  <div class="qtm-slider">
    <div class="qtm-slider-track"></div>
    <div class="qtm-slider-lead" style="left: 0%; width: 50%"></div>
    <div class="qtm-tooltip qtm-small" style="left: 50%">
      <div class="qtm-slider-handle" tabindex="0"></div>
      <div class="qtm-tooltip-container">50</div>
    </div>
  </div>
  <div class="qtm-slider-container qtm-medium">
    <div class="qtm-slider">
      <div class="qtm-slider-track"></div>
      <div class="qtm-slider-lead" style="left: 0%; width: 50%"></div>
      <div class="qtm-tooltip qtm-medium" style="left: 50%">
        <div class="qtm-slider-handle" tabindex="0"></div>
        <div class="qtm-tooltip-container">50</div>
      </div>
    </div>
    <div class="qtm-slider-container qtm-large">
      <div class="qtm-slider">
        <div class="qtm-slider-track"></div>
        <div class="qtm-slider-lead" style="left: 0%; width: 50%"></div>
        <div class="qtm-tooltip qtm-large" style="left: 50%">
          <div class="qtm-slider-handle" tabindex="0"></div>
          <div class="qtm-tooltip-container">50</div>
        </div>
      </div>
    </div>
  </div>
</div>

Colors​

By default, sliders are emphasized (primary theme). Providing a visual prominence. For visual components where you don’t want to emphasize the slider component, the neutral theme is more appropriate for this deprioritization its focus on the screen.

Primary
Neutral
<div class="qtm-slider-container qtm-primary">...</div>
<div class="qtm-slider-container qtm-neutral">...</div>

Disabled​

Primary
Neutral
<div class="qtm-slider-container qtm-primary qtm-disable">...</div>
<div class="qtm-slider-container qtm-neutral qtm-disable">...</div>

Label, Caption and Metric​

To add label, caption and metric to slider, use elements respectively with qtm-slider-label, qtm-slider-caption, qtm-slider-metric classes in your HTML

<div class="qtm-slider-container">
  <label for="slider-handle" class="qtm-slider-label">Label</label>
  <p class="qtm-slider-caption">Caption</p>
  <div class="qtm-slider">
    <div class="qtm-slider-track"></div>
    <div class="qtm-slider-lead" style="left: 0%; width: 50%"></div>
    <div class="qtm-slider-metric">50</div>
    <div class="qtm-tooltip" style="left: 50%">
      <div
        class="qtm-slider-handle"
        tabindex="0"
        id="slider-handle"
        style="left: 50%"
      ></div>
      <div class="qtm-tooltip-container">50</div>
    </div>
  </div>
</div>

Marks​

To add a marks and a legend to slider, use elements respectively with qtm-slider-mark, qtm-slider-legend classes in your HTML.

Besides, you can change position of a legend by adding qtm-top to this legend element.

<div class="qtm-slider-container">
  <label for="slider-handle" class="qtm-slider-label">Label</label>
  <p class="qtm-slider-caption">Caption</p>
  <div class="qtm-slider">
    <div class="qtm-slider-track"></div>
    <div class="qtm-slider-lead" style="left: 0%; width: 50%"></div>
    <div class="qtm-slider-metric">50</div>

    <div class="qtm-slider-mark qtm-main qtm-active" style="left: 0%"></div>
    <div class="qtm-slider-legend" style="left: 0%">0°C</div>

    <div class="qtm-slider-mark qtm-active" style="left: 10%"></div>
    <div class="qtm-slider-legend" style="left: 10%">1O°C</div>

    <div class="qtm-slider-mark qtm-main qtm-active" style="left: 50%"></div>
    <div class="qtm-slider-legend" style="left: 50%">5O°C</div>

    <div class="qtm-slider-mark" style="left: 90%"></div>
    <div class="qtm-slider-legend" style="left: 90%">90°C</div>

    <div class="qtm-slider-mark qtm-main" style="left: 100%"></div>
    <div class="qtm-slider-legend" style="left: 100%">100°C</div>

    <div class="qtm-tooltip" style="left: 50%">
      <div
        class="qtm-slider-handle"
        tabindex="0"
        id="slider-handle"
        style="left: 50%"
      ></div>
      <div class="qtm-tooltip-container">50</div>
    </div>
  </div>
  <div class="qtm-slider-container">
    ...
    <div class="qtm-slider-legend qtm-top" style="left: 0%">0°C</div>
    <div class="qtm-slider-legend qtm-top" style="left: 10%">1O°C</div>
    <div class="qtm-slider-legend qtm-top" style="left: 50%"></div>
    <div class="qtm-slider-legend qtm-top" style="left: 90%"></div>
    <div class="qtm-slider-legend qtm-top" style="left: 100%"></div>
    ...
  </div>
</div>