Slider

<pc-slider>

1.0.0-alpha.4

Experimentell

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Sliders allow the user to select a single value within a given range.

<pc-slider
    label="Number of users"
    hint="Limit six per team"
    name="value"
    value="3"
    min="0"
    max="6"
    with-markers
    has-tooltip
>
    <span slot="reference">Less</span>
    <span slot="reference">More</span>
</pc-slider>

Code

Edit

This component works well with standard <form> elements. Please refer to the form controls page to learn more about form submission and client‐side validation.

Demos

Labels

Use the label attribute to give the slider an accessible label. For labels that contain HTML, use the label slot instead.

<pc-slider label="Volume" min="0" max="100"></pc-slider>

Code

Edit

Hint

Add descriptive hint to a slider with the hint attribute. For hints that contain HTML, use the hint slot instead.

<pc-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100" value="50"></pc-slider>

Code

Edit

Showing tooltips

Use the has-tooltip attribute to display a tooltip with the current value when the slider is focused or being dragged.

<pc-slider label="Quality" name="quality" min="0" max="100" value="50" has-tooltip></pc-slider>

Code

Edit

Setting `min`, `max` and `step`

Use the min and max attributes to define the slider’s range, and the step attribute to control the increment between values.

<pc-slider label="Between zero and one" min="0" max="1" step="0.1" value="0.5" has-tooltip></pc-slider>

Code

Edit

Showing markers

Use the with-markers attribute to display visual indicators at each step increment. This works best with sliders that have a smaller range of values.

<pc-slider label="Size" name="size" min="0" max="8" value="4" with-markers></pc-slider>

Code

Edit

Adding references

Use the reference slot to add contextual labels below the slider. References are automatically spaced using justify-content: space-between, making them easy to align with the start, center and end positions.

<pc-slider
    label="Speed"
    hint="Controls the speed of the thing you’re currently doing."
    name="speed"
    min="1"
    max="5"
    value="3"
    with-markers
>
    <span slot="reference">Slow</span>
    <span slot="reference">Medium</span>
    <span slot="reference">Fast</span>
</pc-slider>

Code

Edit

If you want to show a reference next to a specific marker, you can add position: absolute to it and set the inset-block-start, inset-block-end, inset-inline-start or inset-inline-end property to a percentage that corresponds to the marker’s position.

Value formatting

Customise how values are displayed in tooltips and announced to screen readers using the valueFormatter property. Set it to a function that accepts a number and returns a formatted string. You can use the Intl.NumberFormat API to format numbers in many ways.

<div class="pc-stack">
    <!-- Percentage -->
    <pc-slider
        class="slider-percentage"
        label="Percentage"
        name="percentage"
        value="0.5"
        min="0"
        max="1"
        step="0.01"
        has-tooltip
    ></pc-slider>

    <!-- Duration -->
    <pc-slider
        class="slider-duration"
        label="Duration"
        name="duration"
        value="12"
        min="0"
        max="24"
        has-tooltip
    ></pc-slider>

    <!-- Currency -->
    <pc-slider
        class="slider-currency"
        label="Currency"
        name="currency"
        min="0"
        max="100"
        value="50"
        has-tooltip
    ></pc-slider>
</div>

<script>
    const sliderPercentage = document.querySelector(".slider-percentage");
    const sliderDuration = document.querySelector(".slider-duration");
    const sliderCurrency = document.querySelector(".slider-currency");

    const percentageFormatter = new Intl.NumberFormat("en-GB", { style: "percent" });
    const durationFormatter = new Intl.NumberFormat("en-GB", {
        style: "unit",
        unit: "hour",
        unitDisplay: "long",
    });
    const currencyFormatter = new Intl.NumberFormat("en-GB", {
        style: "currency",
        currency: "EUR",
        currencyDisplay: "symbol",
        maximumFractionDigits: 0,
    });

    customElements.whenDefined("pc-slider").then(() => {
        sliderPercentage.valueFormatter = (value) => percentageFormatter.format(value);
        sliderDuration.valueFormatter = (value) => durationFormatter.format(value);
        sliderCurrency.valueFormatter = (value) => currencyFormatter.format(value);
    });
</script>

Code

Edit

Range selection

Use the range attribute to enable dual‐thumb selection for choosing a range of values. Set the initial thumb positions with the min-value and max-value attributes.

<pc-slider
    class="slider-range"
    label="Price range"
    hint="Select minimum and maximum price"
    name="price"
    min="0"
    max="100"
    min-value="20"
    max-value="80"
    has-tooltip
    range
>
    <span slot="reference">0 €</span>
    <span slot="reference">50 €</span>
    <span slot="reference">100 €</span>
</pc-slider>

<script>
    const slider = document.querySelector(".slider-range");
    const formatter = new Intl.NumberFormat("en-GB", {
        style: "currency",
        currency: "EUR",
        maximumFractionDigits: 0,
    });

    customElements.whenDefined("pc-slider").then(() => {
        slider.valueFormatter = (value) => formatter.format(value);
    });
</script>

Code

Edit

For range sliders, the minValue and maxValue properties represent the current positions of the thumbs. When the form is submitted, both values will be included as separate entries with the same name.

  const slider = document.querySelector("pc-slider[range]");

console.log(`Minimum value: ${slider.minValue}, maximum value: ${slider.maxValue}`);

slider.minValue = 30;
slider.maxValue = 70; 

Vertical

Set the orientation attribute to vertical to create a vertical slider. Vertical sliders automatically centre themselves and fill the available vertical space.

<div class="pc-gap-l">
    <pc-slider
        orientation="vertical"
        label="Volume"
        name="volume"
        value="65"
    ></pc-slider>
    <pc-slider
        orientation="vertical"
        label="Bass"
        name="bass"
        value="50"
    ></pc-slider>
    <pc-slider
        orientation="vertical"
        label="Treble"
        name="treble"
        value="40"
    ></pc-slider>
</div>

Code

Edit

Range sliders can also be vertical.

<div style="display: flex; align-items: center">
    <pc-slider
        class="slider-vertical-range"
        label="Temperature range"
        orientation="vertical"
        tooltip-placement="right"
        style="inline-size: auto"
        min="0"
        max="100"
        min-value="30"
        max-value="70"
        has-tooltip
        range
    ></pc-slider>
</div>

<script>
    const slider = document.querySelector(".slider-vertical-range");

    slider.valueFormatter = value => {
        return new Intl.NumberFormat("en-GB", {
            style: "unit",
            unit: "celsius",
            unitDisplay: "short",
            minimumFractionDigits: 0,
            maximumFractionDigits: 1,
        }).format(value);
    };
</script>

Code

Edit

Size

Control the slider’s size using the size attribute.

<div class="pc-stack">
    <pc-slider size="small" value="50" label="Small"></pc-slider>
    <pc-slider size="medium" value="50" label="Medium"></pc-slider>
    <pc-slider size="large" value="50" label="Large"></pc-slider>
</div>

Code

Edit

Indicator offset

By default, the filled indicator extends from the minimum value to the current position. Use the indicator-offset attribute to change the starting point of this visual indicator.

<pc-slider
    label="User friendliness"
    hint="Did you find our product easy to use?"
    name="value"
    value="0"
    min="-5"
    max="5"
    indicator-offset="0"
    with-markers
    has-tooltip
>
    <span slot="reference">Easy</span>
    <span slot="reference">Moderate</span>
    <span slot="reference">Difficult</span>
</pc-slider>

Code

Edit

Disabled

Use the disabled attribute to disable a slider.

<pc-slider label="Disabled" value="50" disabled></pc-slider>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`validationTarget`	Overrides the validation target to point to the focusable element.	‐
`label`	The slider’s label. If you need to provide HTML in the label, use the `label` slot instead. Typ: `string`	`""`
`hint`	The slider’s hint. If you need to display HTML, use the `hint` slot instead. Typ: `string`	`""`
`name`	The name of the slider, submitted as a name/value pair with form data. Typ: `string`	‐
`minValue` `min-value`	The minimum value of a range selection. This is only used when the `range` attribute is set. Typ: `number`	`0`
`maxValue` `max-value`	The maximum value of a range selection. This is only used when the `range` attribute is set. Typ: `number`	`50`
`defaultValue` `value`	The default value of the slider. Primarily used for resetting the slider. Typ: `number`	‐
`value`	The current value of the slider, submitted as a name/value pair with form data. Typ: `number`	‐
`range`	Converts the slider to a range slider with two thumbs. Typ: `boolean`	`false`
`isRange`	Get if this is a range slider. Typ: `boolean`	‐
`disabled`	Disables the slider. Typ: `boolean`	`false`
`readonly`	Makes the slider a read‐only field. Typ: `boolean`	`false`
`orientation`	The orientation of the slider. Typ: `"horizontal" \| "vertical"`	`"horizontal"`
`size`	The slider’s size. Typ: `"small" \| "medium" \| "large"`	`"medium"`
`indicatorOffset` `indicator-offset`	The starting value from which to draw the slider’s fill, which is based on its current value. Typ: `number \| undefined`	‐
`min`	The minimum value allowed. Typ: `number`	`0`
`max`	The maximum value allowed. Typ: `number`	`100`
`step`	The granularity the value must adhere to when incrementing and decrementing the value. Typ: `number`	`1`
`required`	Indicates if the slider must be interacted with or not. Typ: `boolean`	`false`
`autofocus`	Tells the browser to focus the slider when the page loads or a dialog is shown. Typ: `boolean`	‐
`tooltipDistance` `tooltip-distance`	The distance of the tooltip from the slider’s thumb. Typ: `number`	`8`
`tooltipPlacement` `tooltip-placement`	The placement of the tooltip in reference to the slider’s thumb. Typ: `"top" \| "right" \| "bottom" \| "left"`	`"top"`
`withMarkers` `with-markers`	Adds markers at each step along the slider. Typ: `boolean`	`false`
`hasTooltip` `has-tooltip`	Adds a tooltip above the thumb when the control has focus or is dragged. Typ: `boolean`	`false`
`valueFormatter`	A custom formatting function to apply to the value. This will be shown in the tooltip and announced by screen readers and is property only. Typ: `(value: number) => string \| undefined`	‐
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots

Name	Beschreibung
`label`	The slider label. Alternatively, you can use the `label` attribute.
`hint`	Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
`reference`	One or more reference labels to show visually below the slider.

Erfahre mehr über die Benutzung von Slots.

Methoden

Name	Beschreibung	Argumente
`focus()`	Focuses the slider.	‐
`blur()`	Unfocuses the slider (i.e., blurs it).	‐
`stepDown()`	Decreases the slider’s value by `step`. This is a programmatic change, so `change` and `input` events will not be emitted when this is called.	‐
`stepUp()`	Increases the slider’s value by `step`. This is a programmatic change, so `change` and `input` events will not be emitted when this is called.	‐

Erfahre mehr über Methoden.

Events

Name	Beschreibung	Event‐Detail
`change`	Emitted when an alteration to the control’s value is committed by the user.	`Event`
`focus`	Emitted when the control gains focus.	`FocusEvent`
`blur`	Emitted when the control loses focus.	`FocusEvent`
`input`	Emitted when the control receives input.	`InputEvent`
`pc-invalid`	Emitted when the slider has been checked for validity and its constraints aren’t satisfied.	‐

Erfahre mehr über Events.

Benutzerdefinierte Eigenschaften

Name	Beschreibung	Standard
`--track-size`	The height or width of the slider's track.	`0.75em`
`--marker-width`	The width of each individual marker.	`0.1875em`
`--marker-height`	The height of each individual marker.	`0.1875em`
`--thumb-width`	The width of the thumb.	`1.25em`
`--thumb-height`	The height of the thumb.	`1.25em`

Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.

Parts

Name	Beschreibung
`label`	The element that contains the slider’s label.
`hint`	The element that contains the slider’s hint.
`slider`	The focusable element with `role="slider"`. Contains the `track` and `reference` slot.
`track`	The slider’s track.
`indicator`	The colored indicator that shows from the start of the slider to the current value.
`markers`	The container that holds all the markers when `with-markers` is used.
`marker`	The individual markers that are shown when `with-markers` is used.
`references`	The container that holds references that get slotted in.
`thumb`	The slider’s thumb.
`thumb-min`	The thumb representing the minimum value in a range slider.
`thumb-max`	The thumb representing the maximum value in a range slider.
`tooltip`	The tooltip, a `<pc-tooltip>` element.
`tooltip-tooltip`	The tooltip’s `tooltip` part.
`tooltip-content`	The tooltip’s `content` part.
`tooltip-arrow`	The tooltip’s `arrow` part.

Erfahre mehr über das Anpassen von CSS‐Parts.

Importieren

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.4/cdn/components/slider/slider.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.4/cdn/components/slider/slider.js"; 

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "placer-toolkit/dist/components/slider/slider.js";

Abhängigkeiten

Diese Komponente importiert automatisch folgende Komponenten:

Demos

Labels

Hint

Showing tooltips

Setting min, max and step

Showing markers

Adding references

Value formatting

Range selection

Vertical

Size

Indicator offset

Disabled

Eigenschaften

Slots

Methoden

Events

Benutzerdefinierte Eigenschaften

Parts

Importieren

Abhängigkeiten

Setting `min`, `max` and `step`