Skip to main content

jQuery noUIslider Pip Label Customization

Recently, I was tasked with creating a slider element for a user to select their credit rating, of which the user can select from among: 'Poor', 'Fair', 'Good', 'Excellent' and 'Not Sure'. 

 Several problems presented themselves here:

  • A drop-down box would be better, but that's not what the requirements specified.
  • I already have several numeric sliders on my page and I want them all to match.
  • I selected the jQuery noUi Slider library to create the numeric sliders.
  • noUi Slider does not support string values - only numeric values.
  • The "pips" (slider scale/labels) also does not support string values.
Since the solution involved shifting my mindset, I wanted to document it here for future reference and maybe to help someone facing the same requirements.

 Here's my solution:
  • Since there is really no numeric correlation to credit score (especially considering one of the options is "Not Sure"), I will just use an index of 1 through 5.
  • The index will correspond to one of the five ratings (via an array) and will have to match an array in the script which process the form.
  • The pip labels will need to be manually overridden to hide the numeric values.
Given that solution, here is the code I came up with:

// Get a handle to the rating slider var rating_slider = document.getElementById('rating_slider');

 // Range for the slider
var rating_range = {
'min': [1],
'max': [5]
};

// Initialize the slider
noUiSlider.create(rating_slider, {
range: rating_range,
start: 3,
step: 1,
connect: 'lower',
pips: {
mode: 'range',
density: 25,
stepped: true
}
});

// Alter the pip labels (and modify/add the middle one)
$('#rating_slider > div.noUi-pips.noUi-pips-horizontal > div:nth-child(2)').text('Not Sure');
$('#rating_slider > div.noUi-pips.noUi-pips-horizontal > div:nth-child(4)') .removeClass('noUi-marker-normal') .addClass('noUi-marker-large') .append('<div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 50.00000%">Fair</div>');
$('#rating_slider > div.noUi-pips.noUi-pips-horizontal > div:nth-child(7)').text('Excellent');

 // Slider event handlers
rating_slider.noUiSlider.on('slide', function (values, handle) {
// Array of score names
var rating_names = ['Not Sure', 'Poor', 'Fair', 'Good', 'Excellent'];

 // Get rounded value
var value = Math.round(values[handle]);

 // Get score name to show in tool-tip
var text = rating_names[value - 1];

 // Set hidden field to value
$('#rating_id').val(value);

 // Show score name in tool-tip
$('#rating-tip').text(text).removeClass('hidden');
});

 // Function to hide the tool-tip again after a timeout
rating_slider.noUiSlider.on('change', function (values, handle) {
setTimeout(function () {
$('#rating-tip').addClass('hidden');
}, 500);
});

Note: the above code requires jQuery, noUiSlider and Bootstrap 3.

Comments

Post a Comment

Popular posts from this blog

How to Create a new Case Record Type in Salesforce

Here are the specific steps for adding a case record type. Some steps may vary by organization but the process should be pretty similar to what is shown here. 1) Create a new page layout 2) Add any new case statuses to picklist 3) Edit case statuses that should indicate case is "closed" 4) Add any new case types to picklist 5) Add any new case reasons to picklist 6) Add any new case origins to picklist 7) Add any new fields to case object 8) Under Record Types, ensure the picklists have the correct values (i.e. - Reason/Type/Origin) 9) Within the Type field, edit "Reason" field dependencies matrix and add new reason(s) to types 10) Create a new support process (if not reusing an existing one) 11) Create the new record type (enable for all profiles) 12) Finalize the page layout (if needed) and check "Default" in Case Assignment checkbox under Layout Properties 13) Create approval queues (if needed) 14) Set up approv...
Post a Comment
Read more

Java...Still Sucking Hard, Compared to Other Languages

I know there are a bunch of Java devotees out there.  I frequently have them evangelizing the language to me as a "strongly-typed" language that is so much better than loosely-typed languages, like PHP.  So here is something that just came up for me and I'd like to ask all those devotees WHY they like the type enforcement. Here's a bit of code to store a random integer as a string in PHP: $myString = rand(5); And now...the Java version: String myString = String . valueOf ( Integer . valueOf ( Math . random () * 10000 )); I get it...you need to keep your phony-baloney job and writing more  code and making it more complicated can help you keep it out of the hands of less "intelligent" programmers. As for myself, I will always prefer a language that lets me write shorter, more eloquent code and get my applications built faster.  But then...maybe I'm just simple.
Post a Comment
Read more