A Site for WordPress Plugins

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.

  1. Arafat hossain on 24 Jul 2019:

    Thanks a ton

    Reply to Arafat hossain

  2. Arafat hossain on 23 Jul 2019:

    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?

    Reply to Arafat hossain

    • Graham on 23 Jul 2019:

      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.

  3. Arafat hossain on 20 Jul 2019:

    Hey How can i change the width of the rangeslider overall?I cant change the width.

    Reply to Arafat hossain

    • Graham on 20 Jul 2019:

      It should expand to fill the available space. Can you send me a link to the site so I can take a look

  4. aman on 25 Jun 2019:

    i want for woocommerce

    Reply to aman

    • Graham on 25 Jun 2019:

      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.

  5. Habibur on 02 Jan 2018:

    Nice

    Reply to Habibur

  6. Mubarak Shiyad on 21 Oct 2016:

    Thanks so much. Awesome plugin. That saves my lotsof money.Great Job.Thanks again

    Reply to Mubarak Shiyad

  7. Christina on 12 Sep 2016:

    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

    Reply to Christina

    • Graham on 13 Sep 2016:

      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.

    • Christina on 15 Sep 2016:

      Thank you. But you are right. Doesn’t look good on smartphones. I have not checked it before you mentioned it. Thanks!

  8. Arlene on 15 Jul 2015:

    Hi how can I put multiple range slider in one form? Thanks

    Reply to Arlene

    • Arlene on 15 Jul 2015:

      I’ve called your function inside a search form.. but I don’t have any idea to put another one.

    • Graham on 15 Jul 2015:

      How have you got this to work inside a search form? Unless I can see your site I can’t really help.

    • Graham on 15 Jul 2015:

      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.

    • Arlene on 16 Jul 2015:

      I’ve sent an email. Thank you.

  9. seungbaek on 06 Jul 2015:

    hi,
    i thanks your plugin.
    how can change random price slider?
    30 50 100 200 300 400 500 1000
    thanks..

    Reply to seungbaek

  10. Erik on 25 Jan 2015:

    how hard would it be to adapt the slider plugin to do something like this?http://www.thecascadeteam.com/

    Reply to Erik

    • Graham on 26 Jan 2015:

      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.

    • erik on 26 Jan 2015:

      thanks for responding

  11. Sheryl on 23 Dec 2014:

    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!!!

    Reply to Sheryl

    • Graham on 23 Dec 2014:

      Oops. Change the function name on line 52 to: qrs_rangeslider and you should be OK.

    • Sheryl on 23 Dec 2014:

      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…

    • Graham on 24 Dec 2014:

      That’s what happens when I fiddle with things- I break them. I’ve just emailed you an updated version to test.

  12. Prem Kumar on 03 Dec 2014:

    I want this plugin…. kindly tell me how can i download this plugin

    Reply to Prem Kumar

    • Graham on 03 Dec 2014:

      Look up! I’ve added a download link for you.

  13. Anagorn on 01 Dec 2014:

    I would like to get this as well!

    Reply to Anagorn

    • Graham on 03 Dec 2014:

      Look up! I’ve added a download link for you as well

  14. Eldred on 08 Nov 2014:

    Sounds just what I need if you are able to let me have a copy?

    Reply to Eldred

    • Graham on 08 Nov 2014:

      On it’s way

  15. Francisco on 06 Nov 2014:

    hi, i would love to test this plugin as im having a hard time including the slider by myself ! thanks 🙂

    Reply to Francisco

    • Graham on 06 Nov 2014:

      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.

  16. Anna on 08 Sep 2014:

    I really would like this plugin 🙂

    Reply to Anna

    • Graham on 08 Sep 2014:

      Hi Anna,
      I’ve got a couple of tweaks to do to the plugin. Will send it over later today.

  17. Nick on 25 Aug 2014:

    I would love to get this plugin! Thanks!

    Reply to Nick

    • Graham on 25 Aug 2014:

      It’s on its way. You will have to integrate it into your theme/form/whatever but the slider does work.

Add a comment
Your name
Your email