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.

One comment

  1. Tim Jowers says:

    That’s damn cool Scott. I see you also have drag unselect so one could drag select 20 records and then drag unselect 3 within those. That’s the sort of thing I have had a hard time doing with long lists where I select many. This is the best control for the task I have ever seen. I hope you patented it!

  2. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Wow many of valuable tips!
    https://nicktambone.com/
    mexican pharmacies
    mexican pharmacies shipping to usa
    canadian pharmacy no prescription needed
    canadian drugs

  3. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You definitely made the point.
    http://talahicc.com/
    prescription drugs online without doctor canada drugs online canadian family pharmacy north west pharmacy canada
    best canadian prescription prices
    pharmacy prices compare
    canadian pharmacies that are legit
    canadian rx pharmacy online
    best online pharmacies no prescription
    canadian drugstore

  4. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Many thanks, Lots of posts!
    http://www.canadianpharmacymsn.com/
    safe canadian online pharmacies canada pharmaceutical online ordering canadian pharmacy canada pharmacy
    buy online prescription drugs
    canada pharmacies online prescriptions
    canadian pharmacies shipping to usa
    overseas pharmacy forum
    buy prescription drugs online
    northwest pharmacy

  5. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Truly loads of valuable facts.
    http://canadianpharmaciesnnm.com/
    canada drugs online canada pharmaceuticals online canadian online pharmacies canadian pharmacies that ship to us
    walgreens pharmacy
    board of pharmacy
    discount pharmaceuticals
    online pharmacy no prescription
    canadian prescriptions
    compare prescription prices

  6. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Amazing a good deal of fantastic knowledge.
    http://canadianpharmaciescubarx.com/
    candrugstore com canadian pharmacy online us pharmacy no prior prescription global pharmacy canada
    internet pharmacy
    top rated canadian pharmacies online
    mexican pharmacies shipping to usa
    rx pharmacy
    best canadian pharmacies
    canadian drugs

  7. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Nicely put. Kudos!
    https://nicktambone.com/
    canada pharmacy online orders canadian drugs mexican pharmacies shipping to usa canada drugs
    canadian prescription drugstore
    best canadian prescription prices
    pharmacy prescription
    canadian pharmacy 365
    buy online prescription drugs
    prescription drug price comparison

  8. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Whoa plenty of good material!
    http://canadianpharmaciesnnm.com/
    canadian online pharmacies trust pharmacy canada 24 hour pharmacy northwest pharmacy
    compare rx prices
    buy prescription drugs from canada
    canada pharmacies online pharmacy
    prescription drugs online without
    pharmacy prices
    drug price

  9. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Kudos. Useful information.
    https://nicktambone.com/
    rx pharmacy canadian online pharmacies safeway pharmacy canadian pharmacies online
    canadian drug stores online
    canadian drugstore reviews
    canadadrugs.com pharmacy
    online canadian pharcharmy
    canadian prescription drugstore
    mexican online pharmacies

  10. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You actually said it wonderfully.
    http://canadianpharmacysilo.com/
    canada drug prices online pharmacies of canada rx online top rated canadian pharmacies online
    internet pharmacy
    canadian pharmacy meds
    online discount pharmacy
    canada pharmacies
    canadian prescription drugstore
    mail order pharmacies

  11. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Thank you! I like this.
    http://canadianpharmacyntx.com/
    canadapharmacyonline.com northwest pharmacy canadian cialis north west pharmacy canada
    canada pharmacies
    pharmacy online
    canadian pharmacy without prescription
    buy prescription drugs from canada
    medical information online
    pharmacy drug store

  12. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You actually expressed that adequately!
    http://talahicc.com/
    northwest pharmacy canada canada drug canada pharmacy online no script aarp approved canadian online pharmacies
    canada pharmacy
    pain meds online without doctor prescription
    canada drug pharmacy
    canadian pharmacies online
    online pharmacy no prescription needed
    buying prescription drugs canada

  13. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Kudos, Great information.
    http://canadianonlinepharmacynnm.com/
    pharmacy without dr prescriptions northwest pharmacy mail order pharmacy aarp approved canadian online pharmacies
    buy prescription drugs from canada
    prescription drugs online without
    online drugstore
    approved canadian pharmacies online
    rx pharmacy
    canadian rx

  14. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    This is nicely said! !
    http://canadianpharmaciesnnm.com/
    canada pharmacy no prescription canadian pharmacies that ship to us canadian online pharmacy reviews canadian pharmacies that ship to us
    canada drugs online
    canadian meds
    discount pharmaceuticals
    drugs from canada
    buy prescription drugs online
    onlinecanadianpharmacy.com

  15. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You actually expressed it effectively.
    http://canadianpharmacyntx.com/
    board of pharmacy trust pharmacy canada canadianpharmacy canadianpharmacy
    prescription online
    canada pharmacy
    drug price
    prescription drug
    safeway pharmacy
    prescription prices comparison

  16. Howardmelve says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Really a good deal of very good data.
    http://canadianpharmaciescubarx.com/
    mail order pharmacy online pharmacies canada prescription cost canadian cialis
    canadian mail order pharmacies
    mexican pharmacies online
    canada pharmacy online
    discount prescription drug
    board of pharmacy
    canada online pharmacy

  17. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Whoa many of terrific advice!
    http://canadianpharmacysilo.com/
    best online pharmacies canada canada pharmaceutical online ordering safe canadian online pharmacies london drugs canada
    online rx pharmacy
    no prescription pharmacy
    best online pharmacies canada
    legitimate online pharmacies
    canadapharmacyonline.com
    pharmacy without dr prescriptions

  18. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Great data. Cheers!
    http://canadianpharmacyntx.com/
    overseas pharmacies canada online pharmacies trusted overseas pharmacies northwestpharmacy
    pharmacies in canada
    online canadian pharmacies
    mail order pharmacy
    discount pharmacy
    canadian drug stores online
    canadian pharmacies top best

  19. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Wonderful posts. Thanks a lot!
    http://canadianpharmacysilo.com/
    canadian pharmacies online prescriptions canada drug drug costs canadian pharmacies that ship to us
    canadian meds
    canada pharmacy online orders
    online pharmacies
    canada online pharmacies
    most reliable canadian pharmacies
    canada pharmacy online reviews

  20. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You actually explained that exceptionally well.
    http://canadianpharmaciescubarx.com/
    canadapharmacy com online pharmacies of canada best canadian online pharmacy canada drugs online
    pharmacies in canada
    best online pharmacy
    discount pharmacy
    online prescription drugs
    rx price comparison
    canadian drug stores online

  21. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Helpful information. Regards!
    http://canadianpharmaciesnnm.com/
    canadian pharcharmy online north west pharmacy canada canadian pharmacy no prescription needed canadian pharmaceuticals online
    canadian rx pharmacy online
    best online pharmacy
    us pharmacy no prior prescription
    online pharmacies canada
    best online pharmacies canada
    mexican pharmacy online medications

  22. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Seriously quite a lot of beneficial tips!
    https://nicktambone.com/
    best non prescription online pharmacies global pharmacy canada canada pharmacies online pharmacy global pharmacy canada
    reputable canadian mail order pharmacies
    best canadian prescription prices
    online pharmacy canada
    northwestpharmacy
    overseas pharmacies
    online pharmacy usa

  23. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You made your point extremely clearly!.
    http://canadianpharmacyntx.com/
    canadian pharmacies online canada pharmacy legitimate online pharmacies canadian cialis
    pharmacy prescription
    overseas pharmacy forum
    canadian family pharmacy
    canadian drug stores online
    pain meds online without doctor prescription
    best canadian pharmacies

  24. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You stated that effectively.
    http://canadianonlinepharmacynnm.com/
    compare prescription prices canadian pharmacies-24h pharmacies in canada canada drugs online
    canadian pharmacies online prescriptions
    meds online
    online pharmacy canada
    prescription cost
    online pharmacy without prescription
    no prior prescription required pharmacy

  25. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Thanks. I value it.
    http://canadianpharmacyntx.com/
    medical information online aarp approved canadian online pharmacies web medical information canadian pharmacies without an rx
    online pharmacy canada
    discount drugs online pharmacy
    canadianpharmacy
    canadian pharmacies shipping to usa
    pharmacy online store
    online pharmacy usa

  26. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Many thanks! Plenty of postings!
    https://nicktambone.com/
    rx pharmacy canada pharmacy online buy prescription drugs online canada online pharmacies
    online pharmacy without prescription
    pharmacy online store
    canadian mail order pharmacies
    walgreens pharmacy
    canadian pharmacy online
    cheap canadian drugs

  27. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Great info. Appreciate it.
    http://canadianpharmacyntx.com/
    canada drug pharmacy canadian drugs canada pharmacy online orders canada drugs online
    mail order pharmacy
    prescription drugs online without doctor
    highest rated canadian pharmacies
    mail order pharmacy
    discount prescription drugs online
    reputable canadian mail order pharmacies

  28. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You suggested this superbly.
    https://nicktambone.com/
    most reliable canadian pharmacies canada drugs online canadian drugstore reviews canada drugs online
    best online pharmacies no prescription
    canada online pharmacies
    best online pharmacy
    canadian pharmacy meds
    meds online
    mexican pharmacy online medications

  29. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Truly many of beneficial data!
    http://canadianpharmaciesnnm.com/
    24 hour pharmacy canada pharmacy online pharmacies canadian online pharmacy
    price prescription drugs
    online pharmacy without prescription
    buy prescription drugs canada
    pharmacy online mexico
    online canadian pharmacy
    canadian mail order pharmacies

  30. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Incredible plenty of beneficial information.
    http://canadianpharmacyntx.com/
    canadapharmacyonline.com canada drugs legitimate online pharmacies canadian pharmacies that ship to us
    drug price
    prescription drugs without doctor approval
    top rated canadian pharmacies online
    canada pharmacies
    canada pharmacies without script
    overseas pharmacy forum

  31. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Cheers! A lot of posts.
    http://canadianpharmaciesnnm.com/
    canadian mail order pharmacies canadian drugs costco pharmacy pricing canada drugs online
    online pharmacy usa
    canadian mail order pharmacies
    canadadrugs.com pharmacy
    discount pharmaceuticals
    trusted overseas pharmacies
    no prescription pharmacies

  32. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You actually reported it fantastically!
    https://nicktambone.com/
    best non prescription online pharmacies london drugs canada trusted overseas pharmacies trust pharmacy canada
    canada pharmacies online prescriptions
    online canadian discount pharmacy
    canadian pharmacies that are legit
    cheap drugs online
    canadian pharmacy no prescription
    canadian drugstore online

  33. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Fantastic data. Kudos!
    http://canadianpharmaciescubarx.com/
    best non prescription online pharmacies canadian pharmacies-24h drug stores near me canadian viagra
    safeway pharmacy
    top rated canadian pharmacies online
    canadian mail order pharmacies
    prescription drugs canada
    best online pharmacy stores
    canadian pharmacy uk delivery

  34. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Terrific data. Cheers.
    http://canadianpharmacyntx.com/
    canadian prescriptions canadian pharmacy canada online pharmacies aarp approved canadian online pharmacies
    canada drug prices
    pharmacy canada
    canadian viagra
    no prescription pharmacy
    prescription drug
    best online international pharmacies

  35. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Valuable information. Cheers!
    http://canadianpharmacymim.com/
    price prescription drugs mexican pharmacies shipping to usa pharmacy online mexico online pharmacies of canada
    pharmacy price compare
    meds online
    canadian pharmacy viagra brand
    onlinecanadianpharmacy.com
    best canadian online pharmacy
    canadapharmacyonline.com

  36. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Fantastic material, Thank you.
    http://canadianpharmacyntx.com/
    canadapharmacy com canada online pharmacies mexican pharmacy online london drugs canada
    prescription online
    prescription cost
    online pharmacy usa
    online pharmacies canada
    canada pharmacies online prescriptions
    canada pharmacies prescription drugs

  37. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Superb information, Many thanks!
    https://nicktambone.com/
    online pharmacy canada canada pharmacy rx online london drugs canada
    canadian pharmacy
    canadian viagra
    canadian pharcharmy online
    pharmacy tech
    pharmacy prices
    buy online prescription drugs

  38. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Seriously many of valuable knowledge!
    http://talahicc.com/
    online pharmacies canada drugs online board of pharmacy canada pharmaceutical online ordering
    online pharmacy no prescription needed
    canadian pharmacy no prescription needed
    online canadian pharmacies
    drug stores near me
    online discount pharmacy
    prescription drugs online without

  39. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You suggested this well.
    http://talahicc.com/
    mexican pharmacies shipping to usa canada pharmacy online canadian pharmacies canadian online pharmacies
    canada pharmacies online pharmacy
    prescription drugs prices
    rx pharmacy
    online rx pharmacy
    canadian online pharmacy
    canadian drugs

  40. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Wow plenty of superb material.
    http://www.canadianpharmacymsn.com/
    online drugs canada online pharmacies pharmacy prescription canadian viagra
    canadian prescription drugstore
    online pharmacies canada
    prescription drug cost
    online prescription drugs
    cialis online
    canada pharmacies online prescriptions

  41. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Nicely put. Kudos.
    http://canadianonlinepharmacynnm.com/
    international pharmacies that ship to the usa canada drugs online online pharmacy canadianpharmacy
    canadian pharmacies top best
    cheap drugs online
    safeway pharmacy
    buy cialis
    canadapharmacy com
    canadianpharmacy

  42. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Kudos, Quite a lot of forum posts.
    http://canadianpharmaciesnnm.com/
    prescription drugs prices online pharmacies canada rx pharmacy online pharmacies of canada
    mail order pharmacies
    canada pharmacies prescription drugs
    canadian pharmacy online
    online pharmacies canada
    drugs without prescription
    buy prescription drugs without doctor

  43. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Helpful postings. Appreciate it!
    http://canadianpharmacymim.com/
    canada drugs online london drugs canada pharmacies in canada london drugs canada
    best canadian pharmacies
    canada meds
    canada drugs online pharmacy
    visit poster’s website
    canadian drugstore
    onlinecanadianpharmacy.com

  44. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Good posts. Thanks a lot.
    http://canadianpharmacymim.com/
    prescription drug london drugs canada mexican pharmacy online medications canada drugs online
    mail order pharmacies
    canada drugs online
    canadian mail order pharmacies
    canadapharmacyonline com
    online canadian pharmacy
    pharmacies near me

  45. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Regards! Quite a lot of content.
    http://canadianpharmaciesnnm.com/
    onlinecanadianpharmacy.com canadian pharmacies online candrugstore com canadian pharmacies without an rx
    reputable canadian mail order pharmacies
    international pharmacies that ship to the usa
    canadian pharmacy
    discount pharmaceuticals
    canadian pharmacy
    prescription prices comparison

  46. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You explained it adequately!
    http://talahicc.com/
    best online pharmacies canada northwest pharmacy canada pharmacies prescription drugs canadian pharcharmy
    canadian pharmacies online prescriptions
    mexican pharmacy online
    online pharmacy without prescription
    legitimate online pharmacies
    canadian drugstore online
    canadian family pharmacy

  47. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Very good content, Thank you.
    http://canadianpharmaciescubarx.com/
    overseas pharmacies canadian pharmacies canadian pharmacy viagra brand canadian pharcharmy
    pharmacy online store
    prescription prices comparison
    canadapharmacyonline.com
    best online pharmacies canada
    canadian pharmacies online
    cheap prescription drugs

  48. QuentinCoord says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    You revealed it wonderfully!
    http://canadianpharmaciescubarx.com/
    canadian pharmacy uk delivery canada pharmaceutical online ordering pharmacy price comparison global pharmacy canada
    prescription drug cost
    online drugs
    buy cialis
    overseas pharmacies
    legitimate canadian mail order pharmacies
    approved canadian pharmacies online

Leave a Reply

Your email address will not be published. Required fields are marked *