Code Asteroid IDE : Price range picker with jQuery UI, HTML and CSS for eCommerce website.

- Home
- Services
- Our Products
  ›
  - Back
    ‹
  - Palette RGB
  - Code Asteroid
- Skill Test
- Events
- Videos
- News
  ›
  - Back
    ‹
  - Jobs & Hiring
  - Tech News
  - Startups
- Aptitude Test
- Technology
  ›
  - Back
    ‹
  - Developer Corner
  - Tutorials

Price range picker with jQuery UI, HTML and CSS for eCommerce website. Views: 592 By: Ankur Hack

Contribute Run

HTML

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="main-wrapper-con">
 <div class="inner-wrapper-con">
    <div class="c-lang-main-con">
    <div class="c-lang-sub-con">
        <label class="c-lang-font">Price Range</label>
    </div>
</div>
<div class="c-range-con center">
    <div class="c-range-sub-con margin-botton-10 inline-block">
        <div class="width-35perc inline-block center">
            <label for="amount">Rs.</label>
            <input type="text" id="amount_min" class="price-range-font">
        </div>-
        <div class="width-35perc inline-block center">
            <label for="amount">Rs.</label>
            <input type="text" id="amount_max" class="price-range-font">
        </div>
    </div>
    <div id="slider-range"></div>
</div>
  </div>
</div>

CSS

.inner-wrapper-con{
  width:500px;
  margin:auto;
  padding:50px;
  background-color: #ececec;
  margin-top: 25px;
  margin-bottom: 25px;
  border-radius: 5px;
}

.inline-block {
    display: inline-block;
}
.width-35perc {
    width: 35%;
}
.center {
    text-align: center;
}
.ui-widget.ui-widget-content {
    border: 0px solid #c5c5c5 !important;
    box-shadow: 0 0 3px #919191 !important;
}
.price-range-font {
    border: 1px solid #ebebeb;
    width: 50%;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
}
.margin-botton-10 {
    margin: 0 0 20px 0;
}
.ui-widget-header {
    background: #2196F3 !important;
}
.ui-slider .ui-slider-handle {
    z-index: 1 !important;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -0.2em !important;
}
.c-lang-main-con{
  margin-bottom: 10px;
  background-color: #dfdfdf;
  padding: 10px;
}
.c-lang-font{
  margin:0;
}

$("#slider-range").slider({
        range: true,
        min: 0,
        max: 999,
        values: [75, 300],
        slide: function(event, ui) {
            $("#amount_min").val(ui.values[0]);
            $("#amount_max").val(ui.values[1]);
        }
    });
    $("#amount_min").val($("#slider-range").slider("values", 0));
    $("#amount_max").val($("#slider-range").slider("values", 1));
    $("#amount_min").change(function() {
        $("#slider-range").slider("values", 0, $(this).val());
    });
    $("#amount_max").change(function() {
        $("#slider-range").slider("values", 1, $(this).val());
    });

Site

Training

Save Code

No code found to submit, Please add code in editors.

Thank you for your contribution. Our experts are soon review your canvas and update you.