Can you create a range slider with Webflow

Hello,

I am looking to create some kind of interaction that would be a range sliding scale. My creation would be some kind of toggle switch type button that could be dragged and when dragged it would present an amount and a percentage that would increase as the switch is dragged.

Here are some examples;

If anyone has a general idea of how this can be created the help would be awesome !

Thanks,

Jibby


Here is my public share link: LINK
(how to access public share link)

I dont think its possible with only native elements that come with webflow.
You need to rely on integrating external scripts like that jqueryui element above …

Hello,

Thanks for replying. Can we upload the JQuery core libraries into Webflow and then utilize JQuery UI features ?

I am trying to learn code and I am not certain if I can relay it over to Webflow to speed up development processes or I must use a code editor to accomplish certain JQuery featuers.

Thanks again.

Jibby

Hi @JibbyFlow ,

@SidneyOttelohe implemented something like this https://webflow.com/website/Multi-Step-Form (go to step 4)

It’s worth asking him for some tips.

All the best,
Naweed

http://webflow.com/naweedshams

I prefer to use Ion.RangeSlider instead, it’s more customizable than jQueryUI’s.

To use external scripts, you have to link directly to a CDN hosted version using script tags.

Thanks… I really like the Ion Den range slider. I just need to figure out how to make it work. Seems like alot more code skills are required than I currently have. Any Advice ?

Yes, it definitely will be quite a lot of work. I have a demo here http://mncs.webflow.io

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.