Webflow Libraries component

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.

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'.

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.
Text Block, Paragraph or Heading
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.

Text Input Field
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.
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.
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.
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.
move is the default option.
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.
Frequently Asked Questions
Everything you need to know about this attributes solution.
Yes you can, add fs-cmsfilter-type = date to your element with fs-cmsfilter-field = "IDENTIFIER".