Input Type Range Slider Plugin for WordPress
There is a neat input called range which puts a slider on your form. Just add this: <input type=”range> and it works out the box. But styling it isn’t easy because every browser seems to do it differently.
But after some Googling I found a great bit of JQuery that does the job and the result is dinky little WordPress plugin.
I have integrated this into my contact form plugin and the interest calculator. This is a demo of it working in a payment form:
[qpp form=range]It’s fully responsive, cross browser compatible and the shortcode allows you to set max and min values, step size and starting point on the scale.
If you want the plugin here’s the download.
Note: this is really a developer plugin, all it does is configure and style the slider, it doesn’t process the form output, that’s up to you to play with.
If you want to see what you can really do with the plugin, take a look at the Loan Calculator.
But I can’t take all the credit for this as I used the awesome code developed by Andre Ruffert.
Thanks a ton
Basically I don’t want it fit to my whole screen.I want to to make it smaller in terms of width.Here is the link
https://blog-dev.sheraspace.com/rangeslider/
Its taking full window space.can i change it?
Your theme uses bootstrap. It’s this that sets the width. You could try using the customizer and add this CSS:
div.range {width: 80%;margin: 0 auto;}
But you then need to consider people using tablets and phones, they will want it full width. So you may need some media_enquiries in your CSS.
Or consider using this.
Hey How can i change the width of the rangeslider overall?I cant change the width.
It should expand to fill the available space. Can you send me a link to the site so I can take a look
i want for woocommerce
Hi Aman,
Woocommerce already has a number of extensions that let you use a slider. It will be cheaper to purchase one of these than it will to pay me to develop a woocommerce version.
Nice
Thanks so much. Awesome plugin. That saves my lotsof money.Great Job.Thanks again
I’m german, so please excuse my englih.
This looks great, but I’m wondering if it’s possible to use it with text instead of numbers? I’m searching for something like this, the “hotness barometer” on that german site: http://www.sinnliche-seiten.de/
Thanks in advance
Hallo Christina,
That’s all possible but not something you can easily do yourself. And have you checked the slider on your handy? It’s not very good – you can only see one word at a time…
But if you want me to build you a slider with words instead of numbers I can do this.
Thank you. But you are right. Doesn’t look good on smartphones. I have not checked it before you mentioned it. Thanks!
Hi how can I put multiple range slider in one form? Thanks
I’ve called your function inside a search form.. but I don’t have any idea to put another one.
How have you got this to work inside a search form? Unless I can see your site I can’t really help.
The slider plugin is really just a framework. It’s up to you to develop it futher to meet your needs. I’ve got a version I built a while back with two sliders but it would still need a lot of work to be any use. For example, you still need to process the input and do something with the data.
I’ve sent an email. Thank you.
hi,
i thanks your plugin.
how can change random price slider?
30 50 100 200 300 400 500 1000
thanks..
Hi Seungbaek,
You can’t do this. The value and step can only take a single integer value: https://www.w3.org/wiki/HTML/Elements/input/range
how hard would it be to adapt the slider plugin to do something like this?http://www.thecascadeteam.com/
Quite difficult (for me). I have no idea how to make the output shift position like that. If you just want to style the pointer then it’s not so much a problem. As an aside, that slider looks doesn’t really work on a small screen.
thanks for responding
Hi, I uploaded your Range slider plugin but unfortunately this came up:
Fatal error: Call to undefined function qrs_slider() in /hermes/bosoraweb055/b919/ipg.mysitenamecom/mysitename/wp-content/plugins/quick-range-slider/settings.php on line 52
Any thoughts on how I can make this work?
Thanks for all of your efforts!!!
Oops. Change the function name on line 52 to: qrs_rangeslider and you should be OK.
HI Graham,
Thanks so much, that did get rid of the error message, but shortcode isn’t working. Any other thoughts? It maybe the theme, not certain…
That’s what happens when I fiddle with things- I break them. I’ve just emailed you an updated version to test.
I want this plugin…. kindly tell me how can i download this plugin
Look up! I’ve added a download link for you.
I would like to get this as well!
Look up! I’ve added a download link for you as well
Sounds just what I need if you are able to let me have a copy?
On it’s way
hi, i would love to test this plugin as im having a hard time including the slider by myself ! thanks 🙂
Fransisco,
I’ll send you the plugin but what do you want the slider to do? I can adapt the code so it works with whatever you are doing.
I really would like this plugin 🙂
Hi Anna,
I’ve got a couple of tweaks to do to the plugin. Will send it over later today.
I would love to get this plugin! Thanks!
It’s on its way. You will have to integrate it into your theme/form/whatever but the slider does work.