Webflow Libraries component
Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Add this attribute
Description
Name
fs-rangeslider-element
Value
wrapper
The parent wrapper that contains UI elements of the Range Slider
Add this attribute
Description
Name
fs-rangeslider-element
Value
track
The 'track' of the Range Slider. This is the background that shows the entire width of the Range Slider.
IMPORTANT: This must be set to 'position: relative' so the nested fill can be set to absolute.
IMPORTANT: This must be set to 'position: relative' so the nested fill can be set to absolute.
Add this attribute
Description
Name
fs-rangeslider-element
Value
fill
The 'fill color' of the Range Slider. This is the visual color that shows the active selected Range Slider values.
IMPORTANT: This must be set to 'position: absolute' so it can 'fill up' the parent track wrapper.
IMPORTANT: This must be set to 'position: absolute' so it can 'fill up' the parent track wrapper.
Add this attribute
Description
Name
fs-rangeslider-element
Value
handle
The 'handle' of the Range Slider. This is the circle that the user can drag to change the values in the Range Slider.
This does not have to be a circle. It can be any shape made from a div, or an <img> image element.
If you are using two handles in the Range Slider. Add two handle elements to the Range Slider component UI. The two handles can be siblings of each other. The first handle will be the first (min) handle. The second handle will be the second (max) handle.
IMPORTANT: This must be set to 'position: absolute' so it can be properly dragged across the track wrapper. Attributes will automatically apply transform css properties to the handle to assure it's always in the correct location across the track. You do not have to apply these transform properties to the handle. Just nest inside the track and apply 'position: absolute'.
This does not have to be a circle. It can be any shape made from a div, or an <img> image element.
If you are using two handles in the Range Slider. Add two handle elements to the Range Slider component UI. The two handles can be siblings of each other. The first handle will be the first (min) handle. The second handle will be the second (max) handle.
IMPORTANT: This must be set to 'position: absolute' so it can be properly dragged across the track wrapper. Attributes will automatically apply transform css properties to the handle to assure it's always in the correct location across the track. You do not have to apply these transform properties to the handle. Just nest inside the track and apply 'position: absolute'.
The form input that holds the value of the range slider. If using this Text Input Field for a web form submission, there are no attributes needed.
If you are using Text Input Field to integrate with CMS Filter, refer to the FIELD IDENTIFIER dropdown below.
In both use cases, the Text Input Field must match either one or two Handles. If you use two Handles, add two Text Input Fields. If you use one Handle, add one Text Input Field.
If you are using Text Input Field to integrate with CMS Filter, refer to the FIELD IDENTIFIER dropdown below.
In both use cases, the Text Input Field must match either one or two Handles. If you use two Handles, add two Text Input Fields. If you use one Handle, add one Text Input Field.
Display Value
I want this
Text Block, Paragraph or Heading
to display the current value of the Range Slider handle(s)
See how it works
Add this attribute
Description
Name
fs-rangeslider-element
Value
display-value
Display the current value of the Range Slider.
This element can go anywhere inside the fs-rangeslider-element = wrapper.
When using two handles on the Range Slider, place two display-value attributes inside the wrapper. The first display-value will show the value of the first handle. The second display-value will display the value of second handle.
By default, this value will display a number value without formatting. For example, 37662837. To format this number, use option fs-rangeslider-formatdisplay = true.
This element can go anywhere inside the fs-rangeslider-element = wrapper.
When using two handles on the Range Slider, place two display-value attributes inside the wrapper. The first display-value will show the value of the first handle. The second display-value will display the value of second handle.
By default, this value will display a number value without formatting. For example, 37662837. To format this number, use option fs-rangeslider-formatdisplay = true.
FIELD IDENTIFIER
If using Range Slider with CMS Filter, the
Text Input Field
that holds the values of the Range Slider handle(s).
Required for CMS Filtering or a Form submission.
See how it works
Add this attribute
Description
Name
fs-cmsfilter-field
Value
IDENTIFIER
Display the current value of the Range Slider inside a text field input.
This is required when using a Range Slider with CMS Filter.
This element can go anywhere inside the fs-rangeslider-element = wrapper.
When using two handles on the Range Slider, place two Text Input Fields inside the wrapper. The first Text Input Field gets the fs-cmsfilter-range = from attribute. The second Text Input Field gets the fs-cmsfilter-range = to attribute.
This is required when using a Range Slider with CMS Filter.
This element can go anywhere inside the fs-rangeslider-element = wrapper.
When using two handles on the Range Slider, place two Text Input Fields inside the wrapper. The first Text Input Field gets the fs-cmsfilter-range = from attribute. The second Text Input Field gets the fs-cmsfilter-range = to attribute.
Add this attribute
Description
Name
fs-cmsfilter-range
Value
from
Add to the Text Input Field that should represent the 'from' value (or 'min' value)
Add this attribute
Description
Name
fs-cmsfilter-range
Value
to
Add to the Text Input Field that should represent the 'to' value (or 'max' value)
Add this attribute
Description
Name
fs-rangeslider-min
Value
0
The minimum value of the Range Slider.
For example, if the Range Slider goes from 0 to 100, "0" would be the minimum value.
For example, if the Range Slider goes from 0 to 100, "0" would be the minimum value.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
Add this attribute
Description
Name
fs-rangeslider-max
Value
100
The maximum value of the Range Slider.
For example, if the Range Slider goes from 0 to 100, "100" would be the maximum value.
For example, if the Range Slider goes from 0 to 100, "100" would be the maximum value.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
Add this attribute
Description
Name
fs-rangeslider-step
Value
10
As the Range Slider handle is being dragged, the steps indicate the values that can be selected in between the min and max values.
For example, if the Range slider goes from 0 to 100, and you want the user to be able to make selections by '10s', the step would be '10'. In this example, the user would be able to select 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, and 100 from the Range Slider.
For example, if the Range slider goes from 0 to 100, and you want the user to be able to make selections by '10s', the step would be '10'. In this example, the user would be able to select 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, and 100 from the Range Slider.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
Add this attribute
Description
Name
fs-rangeslider-start
Value
50
The initial value of the handle on page load.
This attribute is set on the handle element. If using two handles in the Range Slider, this attribute can be set to each handle.
If not set, the first handle starts at the min value, and the second handle starts at the max value.
This attribute is set on the handle element. If using two handles in the Range Slider, this attribute can be set to each handle.
If not set, the first handle starts at the min value, and the second handle starts at the max value.
Where?
Add to the element with fs-rangeslider-element = "handle"
Add this attribute
Description
Name
fs-rangeslider-formatdisplay
Value
true
Format the display value to a number like this 2,394,338
Formatting defaults to the user's country conventions. Some countries use commas and other countries use dots.
Formatting will be selected from HTML lang attribute by default, modify this attribute's value on your site settings (Settings> General> Language code) for the desired format.
Formatting defaults to the user's country conventions. Some countries use commas and other countries use dots.
Formatting will be selected from HTML lang attribute by default, modify this attribute's value on your site settings (Settings> General> Language code) for the desired format.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
Option
UPDATE
Update the Range Slider <input> values as the handle is being moved or when the handle is released
See how it works
Add this attribute
Description
Name
fs-rangeslider-update
Value
move
The value of the range slider <input> will be updated on every single move of the handle. As the user moves the handle, the <input> constantly updates.
move is the default option.
move is the default option.
Name
fs-rangeslider-update
Value
release
The value of the range slider <input> will be updated when the user releases the mouse/finger from the handle.
This is useful for when using Range Slider with CMS Filter. We may not want to constantly trigger a new filter cycle when the user is still moving the handle. Instead we trigger a single filter cycle when the user releases the handle.
The display-value elements will still be updated real-time as the user moves the handle.
This is useful for when using Range Slider with CMS Filter. We may not want to constantly trigger a new filter cycle when the user is still moving the handle. Instead we trigger a single filter cycle when the user releases the handle.
The display-value elements will still be updated real-time as the user moves the handle.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.
Example of this solution:
Attributes that must have instances
Second instance example
Third instance example
fs-rangeslider-element = "wrapper"
fs-rangeslider-element = "wrapper-2"
fs-rangeslider-element = "wrapper-3"
fs-rangeslider-element = "track"
fs-rangeslider-element = "track-2"
fs-rangeslider-element = "track-3"
fs-rangeslider-element = "fill"
fs-rangeslider-element = "fill-2"
fs-rangeslider-element = "fill-3"
fs-rangeslider-element = "handle"
fs-rangeslider-element = "handle-2"
fs-rangeslider-element = "handle-3"
Frequently Asked Questions
Everything you need to know about this attributes solution.
Can I use attributes to filter by date range?
Yes you can, add fs-cmsfilter-type = date to your element with fs-cmsfilter-field = "IDENTIFIER".
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
