HTML markup
|
1 2 3 4 5 6 7 8 9 |
<div data-range_min="1" data-range_max="9999" data-cur_min="850" data-cur_max="9999" class="ct-range-slider"> <div class="ct-range-slider__bar"></div> <div class="ct-range-slider__left-grip ct-range-slider__grip"> <div class="ct-range-slider__left-label ct-range-slider__label"></div> </div> <div class="ct-range-slider__right-grip ct-range-slider__grip"> <div class="ct-range-slider__right-label ct-range-slider__label"></div> </div> </div> |
Extra data attributes
- data-currency=”$” – set the currency
- data-postfix=”false” – set the currency position (after or before the price)
Screenshot
Range Slider
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* nst Slider */ (nst_slider = function() { var range_slider; range_slider = $('.ct-range-slider'); return range_slider.each(function() { var that; that = $(this); return that.nstSlider({ 'left_grip_selector': '.ct-range-slider__left-grip', 'right_grip_selector': '.ct-range-slider__right-grip', 'value_bar_selector': '.ct-range-slider__bar', 'value_changed_callback': function(cause, leftValue, rightValue) { that.find('.ct-range-slider__left-label').text(leftValue); return that.find('.ct-range-slider__right-label').text(rightValue); } }); }); })(); |
For Range Slider we are using a plugin called nstSlider, you can find documentation here Files are bundled inside confetti.min.js & style.css