Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/Pricing Range slider.html

Created August 18, 2017 20:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DevShahidul/0b382cbeac6b2ec4fe00041d2c852916 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DevShahidul/0b382cbeac6b2ec4fe00041d2c852916 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Pricing Range slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="scripts/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.pricingrange-bar{float: left; width: 100%; padding: 0 17px 0 10px;}
.pricingrange-bar .ui-slider-horizontal .ui-slider-handle{width: 27px; height: 27px; border-radius: 50%; background: #ffffff; top: -7.5px; outline: none;}
.pricingrange-bar .ui-widget.ui-widget-content{background: #273c4f; border: 0; height: 12px;}
.pricingrange-bar .ui-slider .ui-slider-range{background: #ff8702;}
.range-value{float: left; width: 100%; padding-top: 30px;}
.range-value .input-row{float: left; width: 48%; margin:0 2%;}
.range-value .input-row:first-child{margin-left: 0;}
.range-value .input-row:last-child{margin-right: 0;}
.price-value{background: #ffffff; line-height: 43px;}
</style>
</head>
<body>
<div class="price-info">
<div id = "pricingRange"></div>
<div class="range-value">
<div class="input-row">
<input type="text" id="minRange">
</div>
<div class="input-row">
<input type="text" id="maxRange">
</div>
</div>
</div>
<script type="text/javascript">
(function($){
$(function() {
if($(".price-info").length){
var sliderElement = $( "#pricingRange" )
sliderElement.slider({
range: true,
min: 0,
step: 100,
max: 1200000,
values: [ 0, 500000],
slide: function( event, ui ) {
$( "#minRange" ).text( "$" + ui.values[ 0 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
$( "#maxRange" ).text( "$" + ui.values[ 1 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
}
});
$( "#minRange" ).text("$" + sliderElement.slider('values', 0).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
$( "#maxRange" ).text("$" + sliderElement.slider('values', 1).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
}
});
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment