Webflow Range Slider
Copy & Paste Elements
Instructions
a. Copy & paste the Inputflow Library script
b. Add/modify the required attributes
IMPORTANT: If you are uncertain about the structure of the elements, we recommend copying one of the elements from above and using it as a reference/starting point.
The range slider wrapper contains all elements of the range slider. Additionally, this is the element where you add settings attributes to modify the behavior of the range slider.
Add this settings attribute to the if-lib="rangeslider-wrapper" element.
Add this settings attribute to the if-lib="rangeslider-wrapper" element.
Add this settings attribute to the if-lib="rangeslider-wrapper" element.
Add this settings attribute to the if-lib="rangeslider-wrapper" element.
If your range slider has two handles, you can set two initial values by separating each value with a comma, e.g., if-lib-initialvalue="20, 50".
This attribute is optional
Add this settings attribute to the if-lib="rangeslider-wrapper" element.
If this value is set to "true" then the values displayed in all elements with if-lib="rangeslider-value-display" will be formatted.
The format is chosen based on the website visitor's language settings in their browser. If you want to specify the number format, you can also enter a country code, e.g., if-lib-format-number="en_US".
This attribute is optional
Add this settings attribute to the if-lib="rangeslider-wrapper" element.
If this attribute is set to "true," then all formatting options applied to the display values will also be applied to the input values. This means the formatted values will be included in the form submission instead of the non-formatted values.
This only works if the input elements of the range slider are of type "Plain" (text).
If the input is of type "Number", then this setting does not have an effect.
This attribute is optional
Add this settings attribute to the if-lib="rangeslider-wrapper" element.
Use a custom JavaScript function to format the display values. This JavaScript function must be globally defined so that the Inputflow Library has access to it.
The function must take a number as a parameter, and return a string.
For the above example (if-lib-format-function="toRoman"), you could add the following code to your page body to achieve a Roman numeral slider:
<script>
// This function converts a number to a roman number
function toRoman(num) {
num = Math.round(num)
if (!num) return "0"
const numerals = [
{ value: 1000, numeral: 'M' },
{ value: 900, numeral: 'CM' },
{ value: 500, numeral: 'D' },
{ value: 400, numeral: 'CD' },
{ value: 100, numeral: 'C' },
{ value: 90, numeral: 'XC' },
{ value: 50, numeral: 'L' },
{ value: 40, numeral: 'XL' },
{ value: 10, numeral: 'X' },
{ value: 9, numeral: 'IX' },
{ value: 5, numeral: 'V' },
{ value: 4, numeral: 'IV' },
{ value: 1, numeral: 'I' }
];
let roman = '';
for (let i = 0; i < numerals.length; i++) {
while (num >= numerals[i].value) {
roman += numerals[i].numeral;
num -= numerals[i].value;
}
}
return roman;
}
</script>This attribute is optional
Add this settings attribute to the if-lib="rangeslider-wrapper" element.
By default, the rangeslider updates input values only when the handle is released.
Setting this attribute to "move" will update the values while dragging the handle. However, be aware that if other JavaScript functionalities are triggered by input value changes, setting this to "move" might cause performance issues.
Important: This setting only applies to the hidden input values of the range slider. The display values, which are visible to the user, always update instantly, regardless of whether the update behavior is set to "move" or "release".
Important: If you are unsure whether you need this setting, you most likely do not need it.
This element must be nested inside the if-lib="rangeslider-wrapper" element.
This element must be nested inside the if-lib="rangeslider-track" element.
This element must be nested inside the if-lib="rangeslider-track" element.
This element must be nested inside the if-lib="rangeslider-wrapper" element.
It will display the formatted value(s) of the range slider.
This attribute is optional
This settings attribute only affects range sliders with two handles/values. Add this settings attribute to the if-lib="rangeslider-value-display" element.
If you set this attribute's value to "high-value", the element will display the higher of the two handle values. If you set it to "low-value", it will display the lower/smaller value of the range slider.
If you do not use this attribute, then by default:
- The first element with the attribute if-lib="rangeslider-value-display" will display the low value.
- The second element with the attribute if-lib="rangeslider-value-display" will display the high value.
This element must be nested inside the if-lib="rangeslider-wrapper" element
This input element will store the value, which is sent with the form submission. You can have one or two input elements (depending on the number of handles your range slider has).
The input elements should be hidden from the website visitor and set to display: none.