How do I add a range slider to my website?

Design help General
1

I am trying to add something like this to my website, http://ionden.com/a/plugins/ion.rangeSlider/demo.html1

It doesnt have to be this specific plugin, any range slider would do. An example of this in action is the following → http://mncs.webflow.io/#Intro-Section

I am trying to accomplish the exact something. As you slide the range, it shows you how much money you saved. How do I add this to my website, where do I add the libraries, etc? I am not a coder, help would be appreciated.

2

Hey @Azfar_Chattha

It will require some work to do this and indeed you will need custom code. Maybe you should hire someone here, @samliew should be able to help you with this (I am wrong ? ^^) check his site https://samliew.com/

Best,

Blaise

3

Thank you @Blaise_Posmyouck.

@Azfar_Chattha For custom Webflow development, please send your enquiries here http://webflowexpert.com

4

Maybe, someone can point me in the right direction, I am really not looking to hire someone.

5

Could this help a bit on the way?

http://angular-slider.github.io/angularjs-slider/

6

For the people like me who are still learning and like to figure out stuff.
I have figured out simple steps how to get a range slider working on a webflow website :slight_smile:

Option 1
When you click on this link there are several examples:

If you click on one of the “try it yourself”- buttons a new screen opens.
For example: W3Schools Tryit Editor
On the left you see the code, on the right you see the visual result if you press run.
You can alter parameters on the left and see how it turns out.

If you paste the complete code into a embed custom code component and then you’ll have a range slider!
(The custom code componennt is in the dropdown-menu all the way down, where also the navbar-component is located)

You can put it in a container to make it less wide (or change the width parameter)
You can put a text in front of it etc.

Oh and when you have figured this one out: take a look at the other options on this page on the left menu like:
countdown timer How To Create a Countdown Timer
animated icons How To Animate Icons
progressbar How TO JS Progress Bar
timeline How To Create a Timeline
star rating How To Create a Simple Star Rating with CSS

Good luck and have fun playing around with these options!

Option 2

Go to edit page settings in the webflowpage and scroll all the way down.
Paste this code into the before body tag:

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
      $( "#slider" ).slider();
  });
</script>

Now make a div.
And give the div an ID named slider
The Id field you’ll find in the designer on top right of the screen under elements settings (the clogwheel)
Take a look at the code you pasted. You’ll see it says slider with a punctuation point in front of it. You can change the name of it in the code in whatever you like and change the name of the id according to also.

Give the div a certain height or widht etc.

4 Likes
8

Hello, im just a beginner and try to make an interface here in webflow for my 3D configurator in Verge3D. and for the range slider you did explain it real great, just one question: for option 1 that you mentioned. can i do this like adding different element from (w3schools) to my interface, like 1 slider 1 menu and others. and if yes how can i do that? i mean which part of each elements code should be copy paste in custom code?

9

Beautifully presented and explained. Thanks Gijs_1

1 Like