Form range picker 1

Copy component

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.

Signup and upgrade to pro plan to access custom code

<!-- 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>

Form range picker 1

Signup and upgrade to pro plan to access custom code

Not required

Not required

Not required

Form range picker 1

Signup and upgrade to pro plan to access custom code

Not required

Not required

Not required

Hi I am Ayush Kumar, founder of flowblocks.org. I am senior webflow developer with 5 years in web development.

Upgrade to pro @ $39.00 / one time