x-slider demo

<input type="range"> is natively supported by this browser!

Default (default step = 1, default init value should be 50)

Value =

<x-slider name="sliderdemo"></x-slider>

Custom range (default step = 1, default init value should be 0)

Value =

<x-slider name="sliderdemo" min="-50" max=50></x-slider>

Custom step (step = 10, default init value should be 0)

Value =

<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 =

<x-slider name="sliderdemo" min=0 max=5 step=0.5></x-slider>

Custom init value (step = 2, init value = 8)

Value =

<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 =

<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 =

<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 =

<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 =

<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>