Form Range

Apply a custom style to range inputs with JavaScript triggers for events.

FatKit uses the appearance property to style range inputs through CSS only, without applying custom markup. Currently the appearance property is only fully supported by webkit browsers, so that the styling will only apply to Chrome, Safari and Opera and in part Firefox.

info To use this component just uncomment the Sass include at the bottom of the /assets/styles/sass/elements/_form.scss file.


Usage

Add a data attribute f-range to a range input.

Example

Markup

<form class="f-form">
	<p>
		<input type="range" data-f-range>
	</p>
</form>

Custom 'Label' Showing Value

Add the option label : true and label_left: true to position the label on the other side.

Example

Markup

<form class="f-form">
	<p>
		<input type="range" data-f-range="{ label: true }">
	</p>
	<p>
		<!-- With added step attribute -->
		<input type="range" data-f-range="{ label: true, label_left: true }" step="10">
	</p>
</form>

JavaScript options

Option Possible value Default Description
label boolean false Show a label to the right with the value
label_left boolean false Flip the label to the other side

Init element manually

let range = FatKit.range(element, { /* options */ });

Events

These are triggered once the range element is focussed out.

Name Parameter Description
change.f.range event, value On value change
increase.f.range event, value On value increase
decrease.f.range event, value On value decrease
stagnate.f.range event, value The value hasn't changed