range-sliders

range-slider   

Copy
Edit
<!-- components/range-sliders/range-slider.html --> <input type="text" class="js-range-slider" name="my_range" value="" />
Copy
Copy
Edit
/* scss/range-sliders/_range-slider.scss */ .irs--flat { font-family: inherit; height: 70px; .irs-line { background-color: $gray-200; height: 8px; border-radius: 4px; top: 9px; } .irs-bar { height: 8px; background-color: $primary-600; top: 9px; } .irs-handle { width: 24px; height: 24px; top: 0px; border-radius: 50%; background-color: $white; box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06); cursor: pointer; i { display: none !important; } } .irs-from, .irs-to { top: 32px; background-color: transparent; padding: 0; color: $gray-900; @extend .text-md; @extend .weight-m; &::before { display: none; } } .irs-min, .irs-max { display: none; } }
Copy
Edit
/* js/range-slider.js */ $(document).ready(function() { $(".js-range-slider").ionRangeSlider({ type: "double", grid: false, min: 0, max: 1000, from: 200, to: 800, prefix: "$" }); })