But this Range Slider Goes to 11

This slider goes all the way to 11!Sorry, I miss my Spinal Tap days, but that’s a different story …

Recently, I was working on an upcoming feature for New Relic that requires a user to input a lower and an upper percentile value for a metric. And we decided that using some variation on the slider metaphor would work.

So, I fired up a jQuery range slider. It was close, but we needed more functionality and visual feedback elements. Things like:

* Multiple colors to represent the upper and lower range values
* Manual input and customer validation functionality
* Input fields that drag with the handles

I searched around for an existing implementation that would accomplish everything I needed, but didn’t find anything quite right. Then I decided to contribute a little and made a custom range slider plugin built on jQuery slider.

jQuery Slider

This base level plugin got us most of the way there. But I customized it a bit further, utilizing callbacks and adding auto-submit on value changes, revert, and the ability to affect other page form elements.

Plugin Slider

Customizing the plugin fit our needs. I’m curious to see if anyone else will find it useful. So, grab the code and to submit pull requests to improve it.


View posts by .

Interested in writing for New Relic Blog? Send us a pitch!