Добрый день всем,
Прошу уточнить, как корректно прописать параметр слайдера, чтобы при загрузке бегунок был на минимальных значениях?
Слайдер:
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>
