I want to create range slider with rtl direction. this code work corectly for ltr direction. I see this link before and it's not help to me. but if you can tell me from this link ,it's good for me too, please tell me code in detail because this link just say solution without sample code for it. this follow code use jqueri-ui script and css.
please tell me how to change this code for RTL Filter Pricing.
(function ($) {
$('#price-range-submit').hide();
$("#min_price,#max_price").on('change', function () {
$('#price-range-submit').show();
var min_price_range = parseInt($("#min_price").val());
var max_price_range = parseInt($("#max_price").val());
if (min_price_range > max_price_range) {
$('#max_price').val(min_price_range);
}
$("#slider-range").slider({
values: [min_price_range, max_price_range]
});
});
$("#min_price,#max_price").on("paste keyup", function () {
$('#price-range-submit').show();
var min_price_range = parseInt($("#min_price").val());
var max_price_range = parseInt($("#max_price").val());
if(min_price_range == max_price_range){
max_price_range = min_price_range + 100;
$("#min_price").val(min_price_range);
$("#max_price").val(max_price_range);
}
$("#slider-range").slider({
values: [min_price_range, max_price_range]
});
});
$(function () {
$("#slider-range").slider({
range: true,
orientation: "horizontal",
min: 0,
max: 10000,
values: [0, 10000],
step: 100,
slide: function (event, ui) {
if (ui.values[0] == ui.values[1]) {
return false;
}
$("#min_price").val(ui.values[0]);
$("#max_price").val(ui.values[1]);
}
});
$("#min_price").val($("#slider-range").slider("values", 0));
$("#max_price").val($("#slider-range").slider("values", 1));
});
$("#slider-range,#price-range-submit").click(function () {
var min_price = $('#min_price').val();
var max_price = $('#max_price').val();
$("#searchResults").text("Here List of products will be shown which are cost between " + min_price +" "+ "and" + " "+ max_price + ".");
});
})(jQuery);body {
padding: 0;
margin: 0;
font-family: "Open Sans Condensed", "Open Sans", "Droid Sans", sans-serif;
font-size: 1.2em;
line-height: 1.7;
background: #208C8C !important;
color: #DFF7E5;
}
.header-ct h2 {
text-transform: capitalize;
margin: 20px 0px;
color: #ffffff;
}
.header-ct p,
.by a {
color: #ffffff;
}
.by a:hover{
text-decoration:none;
}
.price-range-block {
margin:60px;
}
.ui-slider-horizontal {
height: .6em;
}
.ui-slider-horizontal {
margin-bottom: 15px;
width:40%;
}
.ui-widget-header {
background: #3FE331;
}
.price-range-search {
width:40.5%;
background-color: #f9f9f9;
border: 1px solid #6e6666;
min-width: 40%;
display: inline-block;
height: 32px;
border-radius: 5px;
float: left;
margin-bottom:20px;
font-size:16px;
}
.price-range-field{
width:20%;
min-width: 16%;
background-color:#f9f9f9;
border: 1px solid #6e6666;
color: black;
font-family: myFont;
font: normal 14px Arial, Helvetica, sans-serif;
border-radius: 5px;
height:26px;
padding:5px;
}
.search-results-block{
position: relative;
display: block;
clear: both;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" type="text/css" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<div class="price-range-block">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="slider-range" class="price-filter-range" name="rangeInput"></div>
<div style="margin:30px auto">
<input type="number" min=0 max="9900" oninput="validity.valid||(value='0');" id="min_price" class="price-range-field" />
<input type="number" min=0 max="10000" oninput="validity.valid||(value='10000');" id="max_price" class="price-range-field" />
</div>
<button class="price-range-search" id="price-range-submit">Search</button>
<div id="searchResults" class="search-results-block"></div>
</div>
</div>
</div>
</div>
