codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Price Slider

    30th November 2015

    Jquery - Tricks

    jquery icon

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
     
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
      
      <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
      <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
      <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
        
      <style type='text/css'>
        #amount {
        border: 0;
        color: #f6931f;
        font-weight: bold;
    }
     
    .ui-slider {
        position: relative;
        text-align: left;
        width: 100%;
    }
      </style>
      
     
    <script type='text/javascript'>//<![CDATA[
    $(window).load(function(){
    $(function () {
        $("#slider-range-min").slider({
            range: "min",
            value: 6500,
            min:   4000,
            max:   15000,
            slide: function (event, ui) {
                $("#amount").val("£" + ui.value);
            }
        });
        $("#amount").val("£" + $("#slider-range-min").slider("value"));
    });
    });//]]>
     
    </script>
     
    <label for="amount">Total Price:</label>
    <input type="text" id="amount" />
    <div id="slider-range-min"></div>
     

    Was this code snippet helpful?

    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN