Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    3
    Thanks
    0
    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:

    <p>
    <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;">
    </p>
    <div id="slider-hotel" style="height: 10px;"></div>
    <hr/><br/>
    <p>
    <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;">
    </p>
    <div id="slider-preco" style="height: 10px; "></div>
    <hr/><br/>
    <p>
    <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;">
    </p>
    <div id="slider-duracao" style="height: 10px;"></div>

    And the javascript(just for one slider range):

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

    $( "#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");
    </script>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,448
    Thanks
    11
    Thanked 598 Times in 578 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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    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
    •