Price Range

faqirgulzeb pro asked 6 years ago

Hello, I need to have a range-component with two parameters, for example to filter list by price with minimal and maximal price range. Please Provide the Solution for it.

Jakub Mandra staff premium answered 6 years ago

Hello, We have got all our inputs and their options described in documentation. Please check this link: https://mdbootstrap.com/components/inputs/ There is Range Component with input type="range", but it can hold only one output value. We don`t have yet the component which can designate the interval. I can suggest you to use two Range components to achieve this.   Best regards, Jakub from MDB

faqirgulzeb pro commented 6 years ago

Come on every website is using it in single range like it seems so unprofessional. I read it in support your team member replied 6 months ago that " We will provide its solution soon" and till today there is nothing. Actually I am frustrated because I am only using mdbootstrap for my front end I am not using a single line of any other code other then you guys and your product is awesome but this little thing is now making hurdles in my job because client is demanding that one range with two parameters.

Jakub Mandra staff premium answered 6 years ago

Hello,

Unfortunetally <input type="range"> does not support natively multiple parameters, that was removed from the standard few years ago.

There are some external libraries to achieve that if you need (they use <div> instead <input>).

For now I can suggest you to use one:

http://jqueryui.com/slider/#range

http://ionden.com/a/plugins/ion.rangeSlider/en.html

Or try two range inputs, as i mentioned before:

<form class="range-field row">
<div class="col mr-0 pr-0">
<input type="range" min="0" max="100" />
</div>
<div class="col ml-0 pl-0">
<input type="range" min="100" max="200" />
</div>
</form>

 

Don't hesitate to ask further.

Regards,

Jakub from MDB

 


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No