I can't test in 2.65 but this will work in 2.73.
Code:
(function( $ ){
$.fn.sliderButtons = function(options) {
// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
downText: '-', // Text for the "down" button
upText: '+', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 150,// Interval (in ms) between slider movement when button is held down
valuePrefix: '', // Prefix for callout
valueSuffix: '' // Suffix for callout
}, options);
return this.each(function(i) {
var thisQuestion = $(this);
// Add some classes
$(thisQuestion).addClass('slider-button-question');
// Insert the buttons
$('.question-item', thisQuestion).append('<div class="clearfix" />\
<div class="slider-button-wrapper">\
<button type="button" class="slider-button down btn btn-md btn-primary">'+opts.downText+'</button>\
<button type="button" class="slider-button up btn btn-md btn-primary">'+opts.upText+'</button>\
</div>');
// Initial button states
function handleButtonState(slider) {
var thisRow = $(slider).closest('.question-item');
var thisSliderVal = $(slider).val();
var thisSliderStep = $(slider).attr('data-bs-slider-step');
var thisSliderMin = $(slider).attr('data-bs-slider-min');
var thisSliderMax = $(slider).attr('data-bs-slider-max');
$('button.slider-button', thisRow).prop('disabled', false);
if (thisSliderVal == thisSliderMin) {
$('button.slider-button.down', thisRow).prop('disabled', true);
}
if (thisSliderVal == thisSliderMax) {
$('button.slider-button.up', thisRow).prop('disabled', true);
}
}
$('input:text.form-control', thisQuestion).each(function(i) {
var thisInput = $(this);
$(this).on('slideEnabled', function( event, ui ) {
var thisRow = $(thisInput).closest('.question-item');
handleButtonState(thisInput);
if($('input.text', thisRow).val() != '') {
$('.tooltip-inner', thisRow).text(opts.valuePrefix+$(thisInput).val()+opts.valueSuffix);
}
// Listener on sliders
$(thisInput).on('slide slideStop', function( event, ui ) {
handleButtonState(thisInput);
});
});
});
// Function to handle button actions
function handleButtons(thisButton) {
var thisRow = $(thisButton).closest('.question-item');
var thisSlider = $('input:text.form-control:eq(0)', thisRow);
var thisSliderStep = $(thisSlider).attr('data-bs-slider-step');
var stepDecimals = 0;
if(thisSliderStep.toString().indexOf('.') >= 0) {
stepDecimals = thisSliderStep.toString().split('.')[1].length;
}
var thisSliderVal = Number($(thisSlider).val()).toFixed(stepDecimals);
var thisSliderMin = $(thisSlider).attr('data-bs-slider-min');
var thisSliderMax = $(thisSlider).attr('data-bs-slider-max');
console.log(thisSliderVal+':'+thisSliderMax);
if ($(thisButton).hasClass('down') && Number(thisSliderVal) > Number(thisSliderMin)) {
$(thisSlider).bootstrapSlider('setValue', Number(thisSliderVal)-Number(thisSliderStep));
}
if ($(thisButton).hasClass('up') && Number(thisSliderVal) < Number(thisSliderMax)) {
$(thisSlider).bootstrapSlider('setValue', Number(thisSliderVal)+Number(thisSliderStep));
}
var newValue = Number($(thisSlider).val()).toFixed(stepDecimals).replace(/\./, LSvar.sLEMradix);
var hiddenInput = $('input.em_sq_validation:eq(0)', thisRow);
$(hiddenInput).val(newValue).trigger('change');
$('.tooltip-inner', thisRow).text(opts.valuePrefix+newValue+opts.valueSuffix);
}
// Scrolling
if(opts.scrolling == true) {
var sliderTimeout;
var clicker = $('button.slider-button', thisQuestion);
var count = 0;
$('button.slider-button', thisQuestion).on('mousedown touchstart', function(){
var thisButton = $(this);
sliderTimeout = setInterval(function(){
handleButtons(thisButton);
}, opts.scrollInterval);
return false;
});
$(document).on('mouseup touchend', function(){
clearInterval(sliderTimeout);
return false;
});
$('button.slider-button', thisQuestion).mouseout(function(){
handleButtonState($(this).closest('.question-item').find('input:text.form-control'));
});
}
// Listener on the buttons
$('button.slider-button', thisQuestion).on('click touchend', function(e) {
handleButtons(this) ;
handleButtonState($(this).closest('.question-item').find('input:text.form-control:eq(0)'));
});
// Listener on reset buttons
$('.slider-reset', thisQuestion).on( "click", function( event, ui ) {
var thisReset = $(this);
setTimeout(function() {
handleButtonState($(thisReset).closest('.question-item').find('input:text.form-control:eq(0)'));
}, 150);
});
});
};
})( jQuery );
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons({
downText: 'Down', // Text for the "down" button
upText: 'Up', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 250, // Interval (in ms) between slider movement when button is held down
valueSuffix: "%" // Suffix for callout
});
});
</script>
Here is a sample survey with all JavaScript and CSS in the source of the first question:
Topic Author
