x-slider demo <input type="range"> is natively supported by this browser! Toggle all polyfills Default (default step = 1, default init value should be 50) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo"></x-slider> Custom range (default step = 1, default init value should be 0) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo" min="-50" max=50></x-slider> Custom step (step = 10, default init value should be 0) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo" min="-50" max=50 step=10></x-slider> Fractional step (step = 0.5, default init value should be 2.5) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo" min=0 max=5 step=0.5></x-slider> Custom init value (step = 2, init value = 8) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo" min=-10 max=10 step=2 value=8></x-slider> Custom invalid init value (min = 0, max = 10, step = 5, init value = 3, but should be rounded to 5) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo" min=0 max=10 step=5 value=3></x-slider> Pos offset range step (min = 3, max = 13, step = 5, default init value should be 8) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo" min=3 max=13 step=5></x-slider> Neg offset range step (min = -1, max = 100, step = 10, default init value should be 49) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo" min=-1 max=100 step=10></x-slider> Uncontainable step (min = 1, max = 4, step = 5, default init value should be 1) Value = Toggle polyfill (Currently ) <x-slider name="sliderdemo" min=1 max=4 step=5></x-slider> Force polyfill UI at all times Value = <x-slider name="sliderdemo" polyfill></x-slider>