Input Slider

Kate Template has wide-range of sliders for smoother UI experience

Default

<input class="input-slider" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14">

Range

<input class="input-slider" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]">

Disabled

<input class="input-slider" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false">

Shapes & colors

<input class="input-slider" data-slider-id="input-slider-square" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-tooltip="hide" data-slider-handle="square">
<br>
<input class="input-slider" data-slider-id="input-slider-round" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-tooltip="hide" data-slider-handle="round">
<br>
<input class="input-slider" data-slider-id="input-slider-rectangle" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-tooltip="hide" data-slider-handle="triangle">
<br>
<input class="input-slider" data-slider-id="input-slider-triangle" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-tooltip="hide" data-slider-handle="triangle">



Vertical

<input class="input-slider" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical">

Left tooltip

<input class="input-slider" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical" data-slider-tooltip-position="left">

Tick marks

<input class="input-slider" data-slider-value="0" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'>

Bottom tooltip

<input class="input-slider" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" data-slider-tooltip-position="bottom">

Custom handler

<input class="input-slider" data-slider-handle="custom">

Ion Range Slider

Basic

Default

Min, max value

Double, range, grid, prefix '$'

Range & Steps

Negative values

250 step

Fractional values

Custom values

Random numbers

Strings

More strings

Prettify

No prettify

Space Separator

Dot Separator

Prettify function

Decorating

Prefix

Postfix

Max postfix

Double decoration

No double decoration

Separator symbol

String ('to')

Visual details

No visual details

Only current range

Only grid

Only min & max

Slider inside container

No Force edges

Force edges

Grid

Auto grid

Manual grid

Grid snap

Strange step

Lock handles

Lock left

Lock both

Movement limits

Invisible borders

Highlight borders

Separate borders

Disable slider

Disabled

Keyboard controls

Arrows & WSAD

Big step

Interval

Minimum interval

Maximum interval

Dragging interval