Range Component

pseudo range input element on Backbone.js

Block Element

Fit Any width, you want

  •  
  •  
  •  
  •  
  •  
  •  
  •  
|
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    |
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    |
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    |

Single Handle

Basic pseudo range input, you can change LOOK and FEEL by CSS

  •  
  •  
  •  
  •  
  •  
  •  
  •  
|

CODE

<div class="range funny">
    <ul class="range-divisions">
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
    </ul>
    <div class="handles">
        <a href="#" class="handle">
            <input type="range" value="0.5" step="any" min="0" max="1" />
            <span>|</span>
        </a>
    </div>
</div>

Multi handles

Also, You can place multiple handles on a line.

  •  
  •  
  •  
  •  
  •  
  •  
  •  
| | |

CODE

<div class="range">
    <ul class="range-divisions">
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
    </ul>
    <div class="handles">
        <a href="#" class="handle" title="1">
            <input type="range" value="0.5" step="any" min="0" max="1" />
            <span>|</span>
        </a>

        <a href="#" class="handle" title="2">
            <input type="range" value="0.5" step="any" min="0" max="1" />
            <span>|</span>
        </a>

        <a href="#" class="handle" title="3">
            <input type="range" value="0.5" step="any" min="0" max="1" />
            <span>|</span>
        </a>
    </div>
</div>

Dependencies

  • requirejs
  • jquery
  • underscore.js
  • backbone.js
require.config({
    /*
    ...
    */
    
    // it's important of name of keys
    paths: {
        jquery: '[jquery_path]',
        backbone: '[backbone_path]',
        underscore: '[underscore_path]',
    }
});

...

require(['jquery', 'views/ranges_view'], function($, RangesView){
    $(document).ready(function(){
        // for example, all el, has range class, behavior range component.
        $(".range").each(function(){
            new RangesView({el: $(this)});
        });
    });
});

LICENSE

MIT or Beerware, as you like