selStrip: a simple multi-select control for your web app

selStripExampleSo, after a long hiatus I’ve decided to bring my blog back to life. And what better way to do that than by showing off a simple UI control I built recently for use in a client web application.

The client needed a way to quickly select multiple values from large lists of values, with the values often being contiguous. Using radio buttons would work, but selecting and deselecting them for large numbers of values would get tedious in a hurry. Enter the selStrip control.

Conceptually, it’s a pretty simple control. It’s designed as a JQuery plugin, so to add a selStrip to your app just include the plugin code, call the initializer, include the required CSS styles, and you’re off to the races. For example, if your application needed the user to select some set of days of the week:


<p>Days:<div id="days" class="selstrip"></div></p>
. . .

<script>
$(function () {
    var days = {
        values:['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT']
    };

    $('#days').selStrip(days);
    $('#days').change(function () {
        console.log($('#days').selStrip('values'));
    });
</script>

To select a range of days, just click and drag on one of the day values. For full source code, just check out the selStrip JSFiddle.

Posted in Javascript, JQuery, UX | Leave a comment