(2022) Webflow Range Slider - No-Code Attributes

In this video, we learn how to build a Range Slider with Attributes. This Rage Slider can be used inside a Webflow form and the CMS filter system Attributes. We can take full control of what the Rage Slider does in our project.
TIMESTAMPS:
00:00 - Intro
00:42 - Docs Overview
00:48 - Add the script
01:07 - Live Implementation
01:30 - Docs Update
03:12 - Add Divs to the page
04:22 - Add Attributes to each div
05:13 - Elements Overview
06:40 - Create a visual
10:08 - Add Elements
11:45 - Set the Range Slider
14:30 - Value of the handle
15:17 - Format display
16:53 - Text Input Field
19:34 - Green Cars Example
20:07 - Two-handle Range Slider
21:43 - Range Slider Update
24:39 - Thank You
ATTRIBUTES: Add advanced features to your Webflow project without code. Attributes is the new way to implement ‪@Finsweet‬ into your ‪@Webflow‬ project.
See all videos from the playlist: • Attributes
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Attributes: www.finsweet.com/attributes/r...
Live Example: attributes-rangeslider.webflo...
Get help with implementation: [e-mail]
Subscribe to Finsweet: kzbin.info?su...
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: / thatsfinsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// TAGS
#range #slider #webflow #attributes
-----------------------------------------------
Thanks for your support! 🤟

[@RYS381]

Great content! Maybe an idea for your next video: In the first 30 seconds, show me what the result of the tutorial will be. I had to skip to the end, to actually know what to expect. For me personally, I get wayyy more engaged if I immediately see something awesome I can build.

[@florianbauer2123]

Genius ! Thank you 🙏

[@ArthurLarin]

Thank you, this is perfect!

[@zachardman4530]

This is F'in sweet.

[@robbykribs6885]

This is incredible, thank you Joe! One question - how would I go about having the fill start at the center with the handle and fill outwards as it is dragged toward the min and max? Thanks in advance!

[@dimka_tregubov]

🔥🔥🔥

[@danielpavey495]

This is great! Any tips on how to display different values? My current project consists of a slider used for a person's height(ft) input. was hoping to adjust the step by inches

[@SurflineDesign]

Looks cool. Only issue is after I implemented Component the only way I can interact with the handles is after I resize the window. Any insight would be much appreciated.

[@jonny_rich_]

Nice one guys! I have two questions; (1) I'm having trouble getting "fs-rangeslider-formatdisplay" attribute to show a period in place of a comma when viewed from Denmark. Is there any way to force this to always be a specific format? And (2) Is it possible to have the submitted field also carry the same formatting? Thanks guys!

[@palmersaddress]

This is amazing! Thanks so much for sharing. My use case will be a single handle with two values. A value displayed at the extreme left of the slider just like in the video, that value will display a number between 1 to 100, again just like in the video. However, I’d like a second value displayed at the extreme right of the slider which would display a calculation of 100 minus the value on the left. So if the slider was in the exact middle, both values would display 50. If the slider was at the one-quarter mark, the values would be 25 and 75 respectively. I feel like this should be fairly simple but I can’t figure out how to work in the calculation for the value at the extreme right. Any help would be fantastic! Just getting started with attributes and I’m so excited about the possibilities.

[@mads-bach-laursen]

Did you solve this?

[@goldenant9450]

how do you add that calculation? via the attributes or code?

[@ericschenkenberger6118]

Is it possible to get the commas to show up in the text input field in the form? I have a client that's using 11 digit numbers.

[@RedSeaVisuals]

How can I access the data that is getting into the text input field outside of webflow? ie. an exported site, I want to grab that input field data into a var.

[@stefanaleksiev1238]

I did everything that is needed, implement the cms filter and then added the range slider. If I leave the slider to the default positions it shows items on the list, as soon as I move it , it show empty list, why?

[@AndresMenard]

What about making a range button for filtering? So have a button that allows filters from 0 - 100 and so on.

[@diegovalero92]

I want to know this too, if you found a solution please let me know.

[@janasanchez473]

Did you find how to do this??

[@RedSeaVisuals]

How can I make rangeslider.js report the the max range value to the input field as a string of my choosing? For example, if I have 1-101 as the range... I want the input field to get 1-100 as normal string numbers, but the 101 value reports as "ALL" to the input field. I am trying to build a selector that chooses between numbered items. but if you crank it to the max value... it says "ALL", instead of 101.

[@sergeyosipov3618]

Does everyone now how to change color effect after clicking slider handle? I have weird purple border here

[@pawe430]

Can such a range slider be placed in the contact form/request for offer?

[@AkasHaHussain]

Can we use it in e-commerce?

[@AnasTabbah]

I have a problem with Range Slider, often the handle get stuck and can't move it? why is that?

[@goldenant9450]

anyone know how to set the display value to a different range of numbers? Say you have slider which the user can select 1, 2 or 3 and 1=$100 2=$125 3=$150.

[@jasonhebert1656]

For anyone building this and using the CMS filter they completely miss a step in this video and in the documentation. On your "price" field in the item you're filtering you need to add the attribute fs-cmsfilter-field=price

[@vanalva]

Man this comment just saved my life. Thank you, I didn’t understand why the slider wasn’t filtering!

[@RedSeaVisuals]

How do you get the attribute value "display-value" stored in a variable in javascript? I want to pass the values to other custom code, stored in a variable.

[@goldenant9450]

did you figure this out?

[@liamlegaillard9840]

Hello I have a problem I put the attribute "fs-cmsfilter-field="Price" in fs-rangerslide_fill and I also put fs-cmsfilter-field="Price" in a text block that contains my price but nothing gets filtered? Do you have an idea ? Otherwise super Tuto all works wonderfully!

[@liamlegaillard9840]

I have one handle

[@andy212251]

@@liamlegaillard9840 This seems to be happening to me as well.... Rebuilt from scratch to correct naming conventions if there were any errors and even imported the complete version into my page to test and still unable to filter. fs-cmsfilter-field is functioning fine on my search and checkbox dropdowns but just not the slider....

[@RedSeaVisuals]

When I slide the slider, my text value shows numbers and decimals... my step size is "1". But even when I do any step value... I get numbers and decimals. How do I get rounded integers?

[@RedSeaVisuals]

I see "precision" as an attribute .... what does that do? values to set? I am trying to get rid of decimals... my text value shows tenths

[@RedSeaVisuals]

YUP. Spelling error on rangeslider step .... so easy to type "rangelsider"! works now... it was acting like step=0... which gives decimals to tenths place.

[@Rassolov_Webflow]

Range slider does not work if you use range slider in a standard webflow slider, it simply does not work, the interesting thing is that if the range slider is located on the first slide, then it works, but when it is located on the second slide or third, etc. then it just doesn't work. It’s a pity, after googling the problem I found several requests with a similar problem that remained unresolved, I hope someday they will fix it, and it’s a pity that I won’t have to use the finsweet product. bad experience

[@markarrow7479]

Why use HTML to build slider for 3 seconds when you can use webflow and build it for 25 minutes 🤡🤡🤡