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 |