SM Creative Price Filter slider

SM Creative Price Filter slider


In default magento the price filter is in range format, the default magento gives a particular range to select your budget like this:

We use SM_Creative theme which is a responsive Magento theme used to customize web page. This theme also provides price slider which enables user to provide his price budget falling between his desired price range of the product.

This slider works absolutely fine on desktop version web browsers as the slider is handled by mouse click event. But when it comes to android and iOS devices(mobile) this theme fails to provide touch support to slide the price slider to and fro.You may try this slider link on touch screen devices:


This problem can be solved using customize this slider using No-UI slider

Step 1 : Download the nouislider.min.css and  nouislider.min.js in the respective folder skin/frontend/sm_creative/default/css/nouislider.min.css and skin/frontend/sm_creative/default/js/nouislider.min.js

Step 2 :  Edit your price.phtml inside the sm_creative theme (app/design/frontend/sm_creative/default/template/sm/shopby/catalog/layer/price.phtml)

  • Firstly include the js and css file by adding the given code :



  • Comment the two spans inside the div having id=”price_filter”           


  • Then add the following script in your given file:


Step 3: After saving the file your slider will work in all the devices.

Copyright © 2013-2017 Auriga IT Consulting Pvt Ltd.