Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

// Paste in head tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />

// Styles custom for range slider
<style>
 .irs {
 font-family: inherit;
 }
 .irs--round .irs-bar{
 	background-color:#000;
 }
 .irs--round .irs-handle{
  	background-color:#fff;
    border:4px solid #000000;
 }
 .irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single{
  	background-color:#000;
 }
</style>
// Paste in body

<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>


<!-- Range slider config script -->
<script>
 $(document).ready(function() {
 var rangeSlider = $('[range-input="range-slider"]');
 var priceFromInput = $('[range-input="price-from"]');
 var priceToInput = $('[range-input="price-to"]');
 
 // Set the default range values
 var defaultFrom = 1000;
 var defaultTo = 5000;

 rangeSlider.ionRangeSlider({
 skin: "round", // You can also try "flat", "big", "modern", "sharp", or "square". Default styles can be overridden with CSS.
 type: "double",
 grid: true,
 min: 0,
 max: 10000,
 from: defaultFrom,
 to: defaultTo,
 prefix: "$",
 onStart: function(data) {
 priceFromInput.val(data.from);
 priceToInput.val(data.to);
 },
 onChange: function(data) {
 priceFromInput.val(data.from);
 priceToInput.val(data.to);
 }
 });

 // Get the initial range values and update the inputs
 var initialRange = rangeSlider.data("ionRangeSlider");
 var initialData = initialRange.result;
 priceFromInput.val(initialData.from);
 priceToInput.val(initialData.to);

 // Update the range slider and inputs when the inputs lose focus
 priceFromInput.on("blur", function() {
 var value = $(this).val();
 var toValue = priceToInput.val();
 
 // Perform validation
 if (
 value < initialRange.options.min ||
 value > initialRange.options.max ||
 value >= toValue ||
 value > initialData.to // Check if fromValue is higher than the current toValue
 ) {
 value = defaultFrom;
 }

 rangeSlider.data("ionRangeSlider").update({
 from: value
 });
 priceFromInput.val(value);
 });

 priceToInput.on("blur", function() {
 var value = $(this).val();
 var fromValue = priceFromInput.val();
 
 // Perform validation
 if (
 value < initialRange.options.min ||
 value > initialRange.options.max ||
 value <= fromValue ||
 value < initialData.from // Check if toValue is lower than the current fromValue
 ) {
 value = defaultTo;
 }

 rangeSlider.data("ionRangeSlider").update({
 to: value
 });
 priceToInput.val(value);
 });
 });
 </script>

Not available

Upgrage to access the custom code @$14/ lifetime

Not available

Not available

This is a success message.
This is an error message.
This is also an error message.