Price limit slider with Bootstrap

Question

I'm using a price slider in my site to select products between a certain price range, but I'm not really sure how to do this. I am using the price range slider from http://www.eyecon.ro/bootstrap-slider/.

<div class='priceslider'>
  <p>Range selector, options specified via data attribute.</p>
  <div class="well">
    Filter by price: <b>€ 10</b> 
    <input id="pricelimit" type="text" class="span2" value="" 
           data-slider-min="10" 
           data-slider-max="200" 
           data-slider-step="5" 
           data-slider-value="[20,100]"/>
    <b>€200</b>
  </div>
</div>

$(document).ready(function() {
  $("#pricelimit").slider({});
});

How do I get the value(s) from this price range slider and how do I use them in a query to select products between those price values?

Do you have bootstrap installed? The html is only part of it the real functionality comes from the javascript that acts on the html elements. — mgrenier, May 14 '15 at 18:30
what are you expecting that code to do? you call the slider that is all. You aren't doing anything with it. — mgrenier, May 14 '15 at 18:52
@mgrenier Yes I want to get the value from the slider but I'm not really sure where to put the code The Vanilla Thrilla mentioned. I'm kind of a newbie... — Jesper Provoost, May 14 '15 at 18:54
so everything looks and works properly you just can't get the value? — mgrenier, May 14 '15 at 18:57
@mgrenier That's right, I don't really know where to put the javascript code and then put it in the query (PHP/SQL). — Jesper Provoost, May 14 '15 at 19:04

KyleMit · Answer 1 · 2015-05-14T19:33:54.833

0

Just use .slider('getValue') like this:

$("#pricelimit").slider('getValue');

Which should return [min, max]

If you need to access the values on the server in PHP or SQL, just makes sure the input element is posting back to the server. Then get the value of the input element and use it however you'd like.

For example:

$("#pricelimit").val();

Should return "min, max"

Demo in Stack Snippets

$(function() {

  $("#pricelimit")
  .slider({})
  .on('slide', function() {
    $('#output').html(this.value);
  }).trigger('slide');

});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>

<div class='priceslider'>
  <p>Range selector, options specified via data attribute.</p>
  <div class="well">
    Filter by price: <b>€ 10</b> 
    <input id="pricelimit" type="text" class="span2" value=""
           data-slider-min="10" 
           data-slider-max="200" 
           data-slider-step="5" 
           data-slider-value="[20,100]"/>
    <b>€200</b>
  </div>
</div>
<p>
 <b>Min/Max</b>: <span id="output"></span>
</p>

edited May 14 '15 at 19:33

answered May 14 '15 at 19:01

KyleMit

30,350
66
462
664

And where exactly do I put the code with the function? – Jesper Provoost May 14 '15 at 19:14
Which code? I'm not sure how you're binding your model data in between the sever and the client. But as long as you can submit a form to the server, the value from the input should be there. If you need help doing that, I would ask a new question with a different scope or research a little bit more about your platform and how to pass data in between calls. The javascript code is only if you want to access those values on the client. If you don't have any use for them there. You don't need it. – KyleMit May 14 '15 at 19:16
I am so confused. Now I just want to display the [min, max] you were talking about. Where do I have to put the code you mentioned? I just want the slider value to be displayed around here: http://i.stack.imgur.com/5yM9i.png After that I can look forward on how to use it in my PHP/SQL query. – Jesper Provoost May 14 '15 at 19:30
I've updated the template to include an example of how you can obtain the output in javascript and update the html as the slider moves. Although without more info, there's really no one way to mandate how you "display the output". You could do it a lot of different ways. From your question, it seemed like you were having trouble even acquiring the output in JavaScript or on the Server. Once you have it there, you should figure out how you'd like it to display on the page. If you're having trouble figuring out how to display data, I'd ask another question or read more about your framework. – KyleMit May 14 '15 at 19:37
One more question, how can I use the [Min, max] value to be able to use a BETWEEN operator in my SQL query? Do I need to split it up? – Jesper Provoost May 14 '15 at 20:13

score 0 · Answer 2 · answered May 14 '15 at 19:07

0

This should output the value of the slider when the slider is slid.

<script type='text/javascript'>
  $('#pricelimit').slider()
     .on('slide', function(ev){
         alert($("#pricelimit").slider('getValue'));
  });
</script>

answered May 14 '15 at 19:07

mgrenier

1,409
3
21
45

if you need to pass it to the server for process with php check this out...http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript might help you out – mgrenier May 14 '15 at 19:11
Now I voted you up, yesterday I didn't even have permission to vote you down/up (new account). – Jesper Provoost May 16 '15 at 13:28

Price limit slider with Bootstrap

2 Answers2

Demo in Stack Snippets