Hi EricCraig,
I agree with your opinion on bias, and we have developed some JS which solves the issue for us. You can add this to individual questions if you wish, but we chose to include the styling in our custom.js for all sliders. I included some screen shots so you can see the before and after effects. "slider_before.png" shows the initial rendering when a page with sliders comes up. "slider_after.png" shows what occurs as sliders are manipulated. Hope it helps.
The code snippet assumes you might have multiple sliders as subquestions and is also designed to exisit within custom.js at the theme level. If you want to apply this at the question level, you should be able to remove the "function" wrapper and paste into the question source.
You can simplify and elimite the nested function by using "let" instead of "var" but we opt'ed for legacy browser support.
Code:
// This function stylizes sliders on the page and registers the "slideStart" event
// The defualt choice for all sliders in this theme is to set the tooltip to a value of
// "Please Select" and hide the selection bar until an initial value has been selected.
function stylizeSlider() {
// Create an object containing all the sliders on the page
var sliders = window.activeSliders;
// Since we might be dealing with multiple sliders on a page, we are defining a separate funtion
// to properly handle variable scoping for each slider.
var myFunc = function (slider) {
// Initialize a boolean to track whether the slider has been manipulated
var slideStarted = false;
// Get the div of slider selection (so we can hide/show)
var sliderSelection = $(slider.getElement()).find(".slider-track .slider-selection");
// Hide the slider selction on the initial rendering of the slider
sliderSelection.hide();
// Set the initial value of the tooltip to "Please Select" unless the slider
// has already been changed.
slider.setAttribute('formatter', function(val) {
return slideStarted ? val : "Please Select";
});
// Relayout the slider to apply the formatter change above
slider.relayout();
// Register the "slideStart" event of the slider to change the tool tip and show the selection
// bar when the slider is changed.
slider.on('slideStart', function() {
if (!slideStarted) {
slideStarted = true;
sliderSelection.show();
}
});
};
// Loop through the sliders on the page to apply the default formatting
for (var value of Object.keys(sliders)) {
// Get a handle for each slider within the object
var slider = window.activeSliders[value].getSlider();
// Set the styling for each slider
myFunc(slider);
}
}
Happy to answer questions if this doesn't make sense.
