Open Web Components
On this page

Input Slider#

A slider paired with a number input that both edit the same value. The slider covers the common range (min/max), while the input allows breaking out of it - the slider range grows to follow. Hard limits are set with absolute-min/absolute-max.

export const simple = () => {
  return html` <owc-input-slider></owc-input-slider> `;
};

Set value#

The value attribute (or property) sets the current value of both controls.

export const value = () => {
  return html` <owc-input-slider value="50"></owc-input-slider> `;
};

Set a Label#

with the label attribute, you can give the slider a label.

export const label = () => {
  return html`
    <owc-input-slider
      @change=${() => console.log('change')}
      @input=${() => console.log('input')}
      label="Give me some number"
    ></owc-input-slider>
  `;
};

Events#

An input event fires while the value changes (typing, dragging the slider) and a change event fires when a change is committed. Read the current value from ev.target.value.

export const events = () => {
  return html`
    <owc-input-slider
      @change=${ev => {
        const out = ev.currentTarget.parentElement.querySelector('#slider-event-out');
        out.textContent = `value: ${ev.target.value}`;
      }}
      @input=${ev => {
        const out = ev.currentTarget.parentElement.querySelector('#slider-event-out');
        out.textContent = `value: ${ev.target.value}`;
      }}
    ></owc-input-slider>
    <pre id="slider-event-out">value: 0</pre>
  `;
};

Input Position#

the position of the slider and the input field can be swapped as well

export const inputPosition = () => {
  return html`
    <owc-input-slider
      @change=${() => console.log('change')}
      @input=${() => console.log('input')}
      input-position="end"
    ></owc-input-slider>
  `;
};

Min/Max/Step#

Set minimum maximum and step. Min and max can be broken out of by using the input

export const minMax = () => {
  return html`
    <owc-input-slider
      @change=${ev => {
        console.log('change');
        console.log(ev.target.value);
      }}
      @input=${ev => {
        console.log('change');
        console.log(ev.target.value);
      }}
      min="-50"
      max="1000"
      step="5"
    ></owc-input-slider>
  `;
};

Absolute Min/Max#

Set absolute minimum and maximum. These cannot be broken out of

export const absoluteMinMax = () => {
  return html`
    <owc-input-slider
      @change=${ev => {
        console.log('change');
        console.log(ev.target.value);
      }}
      @input=${ev => {
        console.log('input');
        console.log(ev.target.value);
      }}
      absolute-min="-50"
      absolute-max="1000"
      step="5"
    ></owc-input-slider>
  `;
};

Stacked#

With input-position="end" and the stacked attribute the label and input share the first row and the slider spans the full width below.

export const stacked = () => {
  return html`
    <owc-input-slider stacked input-position="end" label="Give me some number"></owc-input-slider>
  `;
};

Disabled#

you can also set the slider as disabled.

export const disabled = () => {
  return html` <owc-input-slider disabled value="30" label="Not editable"></owc-input-slider> `;
};

API#

Attributes & properties#

AttributePropertyTypeDefaultDescription
valuevaluenumber0The current value.
labellabelstring''Label shown above the controls.
minminnumber0Lower end of the slider range; shrinks if the input goes below it.
maxmaxnumber100Upper end of the slider range; grows if the input goes above it.
stepstepnumber1Step for both the slider and the input.
absolute-minabsoluteMinnumber-Hard lower bound - values are clamped to it.
absolute-maxabsoluteMaxnumber-Hard upper bound - values are clamped to it.
input-positioninputPosition'start' | 'end''start'Whether the number input renders before or after the slider.
stackedstackedbooleanfalseWith input-position="end": label+input on top, full-width slider below. Reflected.
disableddisabledbooleanfalseDisables both controls. Reflected.

Events#

EventDescription
inputFired while the value changes (typing or dragging).
changeFired when a change is committed (input blur/enter, slider release).

Styling#

The grid layout can be tuned with the CSS custom properties --owc-input-width (default 8ch) and --owc-input-slider-gap (default 20px). The inner Web Awesome input and slider parts are re-exported with input-* and slider-* prefixes (e.g. input-control, slider-track, slider-thumb), and the label is exposed as part label.