Инициализация слайдера
Добрый день всем,
Прошу уточнить, как корректно прописать параметр слайдера, чтобы при загрузке бегунок был на минимальных значениях? Слайдер: http://rangeslider.js.org/ Страница: http://ctz.su/site/abonentskoe-obslu...e-kompyuterov/ Код слайдера: <script> $(function() { var $document = $(document), selector = '[data-rangeslider]', $element = $(selector); // Example functionality to demonstrate a value feedback function valueOutput(element) { var value = element.value, output = element.parentNode.getElementsByTagName('output')[0]; output.innerHTML = value; } for (var i = $element.length - 1; i >= 0; i--) { valueOutput($element[i]); }; $document.on('change', 'input[type="range"]', function(e) { valueOutput(e.target); }); // Example functionality to demonstrate disabled functionality $document .on('click', '#js-example-disabled button[data-behaviour="toggle"]', function(e) { var $inputRange = $('input[type="range"]', e.target.parentNode); if ($inputRange[0].disabled) { $inputRange.prop("disabled", false); } else { $inputRange.prop("disabled", true); } $inputRange.rangeslider('update'); }); // Example functionality to demonstrate programmatic value changes $document.on('click', '#js-example-change-value button', function(e) { var $inputRange = $('input[type="range"]', e.target.parentNode), value = $('input[type="number"]', e.target.parentNode)[0].value; $inputRange.val(value).change(); }); // Example functionality to demonstrate destroy functionality $document .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) { $('input[type="range"]', e.target.parentNode).rangeslider('destroy'); }) .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) { $('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false }); }); // Example functionality to test initialisation on hidden elements $document .on('click', '#js-example-hidden button[data-behaviour="toggle"]', function(e) { var $container = $(e.target.previousElementSibling); $container.toggle(); }); // Basic rangeslider initialization $element.rangeslider({ // Deactivate the feature detection polyfill: false, // Callback function onInit: function() { }, // Callback function onSlide: function(position, value) { console.log('onSlide'); console.log('position: ' + position, 'value: ' + value); }, // Callback function onSlideEnd: function(position, value) { console.log('onSlideEnd'); console.log('position: ' + position, 'value: ' + value); } }); }); function calc(){ var total = 0; var input; if($('#calcForm').find('input[data-range="range1"]').prop('checked')) { input = $('#calcForm').find('input[type="range"]:not([name="range1"])'); } else { input = $('#calcForm').find('input[type="range"]'); } input.each(function(){ if($(this).attr('name') !== range) { var cost = +$(this).attr('data-cost'); var value = +$(this).attr('value'); total += cost*value; } }) var radio = +$('#calcForm').find('input[type=radio]:checked').attr('data-cost'); total += radio; $('.calc__price').text(total) } calc(); $('#calcForm').find('input[type=radio]').change(function(){ calc(); }) </script> |
Цитата:
<input type="range" min="1" max="5" id="address-quantity" data-rangeslider value="1"> |
Благодарю вас!
|
Часовой пояс GMT +3, время: 07:39. |