{% extends "component-demo-base.html" %} {% set TAG_NAME="x-slider" %} {% set COMPONENT_NAME="slider" %} {% block demoContent %}
<x-slider>
's are a polyfill for <input type="range">
, and as such, support most of the same attributes and events.
In fact, if <input type="range">
elements are natively supported, <x-slider>
's default to rendering them instead of a custom UI.
<x-slider></x-slider>
<x-slider min="-50" max="50" step="15" value="-35"></x-slider>
polyfill
In some cases, you may wish for a consistent UI across all browsers, instead of selectively displaying native inputs. If this is the case, set the polyfill
attribute in the markup.
<x-slider polyfill></x-slider>
name
Much like any form input element, <x-slider>
s require a name
attribute to submit.
<form>
<x-slider name="I-have-a-name"></x-slider>
<input type="submit"/>
</form>
In order to detect user input to the slider, two different events are fired by the <x-slider>
, which act in different ways:
input
: This event is fired continuously as the user drags the slider.
change
: This event is fired after the user finishes dragging the slider, if the value has changed.
Important note: Native implementation of input
vs change
events differs from browser to broswer, so when using the native non-polyfill version of the UI, input
and change
events will fire in different circumstances than specified.
While Firefox23+ and the <x-slider>
polyfill UI follow the current standards regarding these events, Webkit and Internet Explorer native implementations are not yet guaranteed to follow these specs. As a workaround, force the polyfill
attribute on the <x-slider>
if the input
/change
difference is crucial.
Without polyfill
With polyfill
<p>Without polyfill</p>
<x-slider></x-slider>
<p>With polyfill</p>
<x-slider polyfill></x-slider>