Basic Usage

A continuous slider from 0 to 100.

<k-slider value="25"></k-slider>

With Steps

Use the steps attribute to define specific snap points. The slider will only stop on those values.

<k-slider min="0" max="100" value="50" steps="0,25,50,75,100">Volume</k-slider>

Range Slider

Pass two comma-separated numbers as the value to create a range slider with two handles. The first number is the lower bound and the second is the upper bound. The handles cannot cross each other.

<k-slider value="20,80"></k-slider>

Range with Steps

<k-slider value="25,75" steps="0,25,50,75,100">Price Range</k-slider>

Vertical

Add the vertical attribute to render the slider vertically. Set a height on the element or its container.

<k-slider vertical value="40"></k-slider>

Vertical Range

Combine vertical with a comma-separated value for a vertical range slider.

<k-slider vertical value="20,80" steps="0,20,40,60,80,100"></k-slider>

Custom Styles

<k-slider value="50" style="
    --track_height: 10px;
    --fill_background: var(--c_success);
    --thumb_size: 28px;
    --thumb_background: var(--c_success);
    --step_dot_size: 12px;
  "></k-slider>

Format Tooltip

Add the tooltip attribute to show a value tooltip above the handle while dragging. Use the format attribute to control how the value is displayed in the tooltip, change event, and form submission. The pattern 0.00 in the format string is replaced with the numeric value at the matching decimal precision.

<k-slider value="25" min="0" max="100" format="$0.00" tooltip></k-slider>

JavaScript Usage

Single Value

<k-slider id="jsSlider" value="0" format="0" tooltip></k-slider>
<p>Value: <span id="sliderVal">0</span></p>
<script>
  const $jsSlider = document.getElementById('jsSlider');
  const $sliderVal = document.getElementById('sliderVal');
  $jsSlider.addEventListener('change', (e) => {
    $sliderVal.textContent = e.detail.value;
  });
</script>

Range

<k-slider id="jsRangeSlider" value="10,90" format="0" tooltip></k-slider>
<p>Range: <span id="rangeDisplay">10 - 90</span></p>
<script>
  const $rs = document.getElementById('jsRangeSlider');
  const $rd = document.getElementById('rangeDisplay');
  $rs.addEventListener('change', (e) => {
    const [lo, hi] = e.detail.value.split(',');
    $rd.textContent = lo + ' - ' + hi;
  });
</script>

Form Usage

The slider is form-associated. Set a name attribute so it participates in form submission. When a format is set, the submitted value is the formatted string.

<form id="sliderForm">
  <k-slider name="volume" value="75" format="0%"></k-slider>
  <k-slider name="priceRange" value="20,80" format="$0"></k-slider>
  <button type="submit">Submit</button>
</form>
<p>Form Data: <span id="formOutput"></span></p>
<script>
  document.getElementById('sliderForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    const entries = [...fd.entries()].map(([k, v]) => k + '=' + v);
    document.getElementById('formOutput').textContent = entries.join(', ');
  });
</script>

Disabled

The disabled attribute prevents user interaction while displaying the current value.

<k-slider disabled value="40"></k-slider>

JavaScript Reference

Constructor

Extends ShadowComponent

new Slider()

Requirements

• ShadowComponent

Properties

value: String

The current value. A single number (e.g. "50") for a standard slider, or two comma-separated numbers (e.g. "20,80") for a range slider. Default is "0". Syncs to value attribute.

name: String

The form field name. When set inside a <form>, the slider participates in form submission. Syncs to name attribute.

min: Number

The minimum value of the slider range. Default is 0. Syncs to min attribute.

max: Number

The maximum value of the slider range. Default is 100. Syncs to max attribute.

steps: String

A comma-separated list of specific values the slider can snap to (e.g. "0,25,50,75,100"). When set, the slider only stops on these values. When not set, the slider is continuous. Syncs to steps attribute.

format: String

A pattern string for formatting the slider value. Applied to the tooltip display, the change event detail.value, and the form submission value. Use 0s as digit placeholders — the number of 0s after the decimal separator controls precision. For example "$0.00" formats 25 as "$25.00". Default is null (raw number). Syncs to format attribute.

tooltip: Boolean

When true, a tooltip showing the current value appears above the thumb handle during drag. Default is false. Syncs to tooltip attribute.

vertical: Boolean

When true, the slider renders vertically. Set a height on the element to control the track length. Default is false. Syncs to vertical attribute.

disabled: Boolean

When true, the slider cannot be changed by user interaction. The element appears at 50% opacity. Syncs to disabled attribute.

Methods

setValue(newValue): void

Sets the lower value, clamped to min/max and snapped to the nearest step. In range mode, it cannot exceed the upper value.

setUpper(newValue): void

Sets the upper value (range mode only), clamped to min/max and snapped to the nearest step. Cannot go below the lower value.

isRange: Boolean (getter)

Returns true when the value contains a comma (i.e. two handles are active).

formattedValue: String (getter)

Returns the value formatted with the format pattern. For range sliders, both halves are formatted (e.g. "$20.00,$80.00"). Returns the raw value when no format is set.

lower: Number (getter)

The numeric lower bound parsed from value.

upper: Number (getter)

The numeric upper bound parsed from value. Equals max when not in range mode.

CSS Variables

Events

change

Fired when the value changes. The event detail contains { value: String }. When a format is set, the value is formatted (e.g. "$50.00" or "$20.00,$80.00"). Without a format, the raw number string is used (e.g. "50" or "20,80").