Segmented Control

Segmented Control is a minimalistic UI control for "single choice" of a value that we use on our web application. It's easy to use and has a simple API.

Value: all. Label: All

// The Markup
    <li data-value="all">All</li>
    <li data-value="approvers">Approvers</li>
    <li data-value="admins">Administrators</li>

// The Javascript
$( 'ul' ).segmentedControl();



Sets the callback that will be invoked when the value changes.

$( 'ul' ).segmentedControl( 'setOnChange', callback );


Sets the value of the control. Must match one of the ones specified in the data attribute values.

$( 'ul' ).segmentedControl( 'setValue', 'approvers' );


Returns the value of the control, as specified in the data attribute values.

$( 'ul' ).segmentedControl( 'getValue' ); // approvers


Returns the text corresponding to the active value.

$( 'ul' ).segmentedControl( 'getActiveLabel' ); // Approvers

Try it

// Clone the repo
git clone

// Install dependencies
npm install
bower install

// Run the tests
npm test