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.