Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Thanked 0 Times in 0 Posts

    slider range javascript

    Hello everybody!

    Happy New Year 2014!

    Well, I have a little problem about slider range. I have three of them but just one work. I want to know how can I resolve this problem.

    My code for slider range is that:

    <label for="hot" style="font-size: 18px;" >Hotel</label>
    <input type="text" name="preco" id="hot" style="color:#f6931f; font-size: 13px; font-weight:bold; width: 170px;">
    <div id="slider-hotel" style="height: 10px;"></div>
    <label for="preco" style="font-size: 18px;">Prešo</label>
    <input type="text" name="preco" id="precos" style="color:#f6931f; font-size: 13px; font-weight:bold; width: 100px;">
    <div id="slider-preco" style="height: 10px; "></div>
    <label for="during" style="font-size: 18px;" >Duracao</label>
    <input type="text" name="preco" id="during" style="color:#f6931f; font-size: 13px; font-weight:bold; width: 150px;">
    <div id="slider-duracao" style="height: 10px;"></div>

    And the javascript(just for one slider range):

    function showProducts(minPrice, maxPrice) {
    $("div#containerLista").hide().filter(function() {
    var price = parseInt($(this).data("hotel"), 10);
    return price >= minPrice && price <= maxPrice;

    $( "#slider-hotel" ).slider({
    range: true,
    min: <?php echo $hotelMIN ?>,
    max: <?php echo $hotelMAX ?>,
    values: [<?php echo $hotelMIN ?>,<?php echo $hotelMAX ?>],
    slide: function(event, ui){
    var min = ui.values[0],
    max = ui.values[1];
    $("#hot").val(ui.values[0] + " Estrelas - " + ui.values[1] + " Estrelas");
    showProducts(min, max);
    $("#hot").val($("#slider-hotel").slider("values",0) + " Estrelas - " + $("#slider-hotel").slider("values",1) + " Estrelas");

  2. #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Thanked 626 Times in 605 Posts
    i would recommend using an <input type=range> at this point; many polyfills support x number of ranges without hard-coded JS.

    since most browsers support it naively, your site will be more accessible than it would using 3rd party wheel re-inventions that barely work on their own.
    the only holdouts then are older IE users without javascript, but even then, the user can still type a number into the input, so input range support is actually universal.

    see more info at http://caniuse.com/input-range
    Last edited by rnd me; 01-02-2014 at 09:06 PM.
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts