Skip to content

Latest commit

 

History

History
102 lines (75 loc) · 2.45 KB

readme.md

File metadata and controls

102 lines (75 loc) · 2.45 KB

Range.js

JavaScript library to resize, reduce, or change ranges of DOM elements using the HTML5 <input type="range"> element.

Usage:

  1. Include range.js in your dependencies
  2. Wrap sections that you want to have input range control over
  3. Add a data-range="true" attribute to the wrapper element
<section data-range="true">
     <input type="range">
     <p>This is some sample text that you can reduce.</p>
</section>
  1. Initialize a Range object within the page
<script>
    range = new Range();
</script>

You can have multiple sections with data-range="true" attributes attached on the same page. The library will automatically detect the type of content within each section.

Examples

Here are live examples.

  1. Text example:
<!-- text example -->
<section data-range="true">
     <input type="range">
     <p>This is some sample text that you can reduce.</p>
     <p>Also works with multiple p elements within the wrapper.</p>
</section>
  1. List example:
<!-- list example -->
<section data-range="true">
     <input type="range">
     <ul>
       <li>Item one</li>
       <li>Item two</li>
       <li>Item three</li>
       <ul>
          <li>three-one</li>
          <li>three-two</li>
       </ul>
       <li>Item four</li>
     </ul>
</section>
  1. Image example:
<!-- image example -->
<section data-range="true">
     <input type="range">
     <img src="ok.png" width="250">
</section>

API

You can set the step of the range through object initialization. The default step is 1. However, setting a decimal can help make scrolling on the input element smoother for items that have a small amount of content (i.e. text or lists).

To set the step, pass an integer or decimal on object initialization.

<script>
    // set step with .25
    range = new Range(0.25);
</script>

Contributing

This is a small, open-source project - contributions are welcomed! Check the Issues section to view open issues, and future goals.

  1. Fork the repository
  2. Create a branch for your patch or feature
  3. Make your changes
  4. Push to your Fork
  5. Open a pull request and describe your changes

Acknowledgements

Thank you to the following individuals for help and contributions:

  • Noah Freitas
  • James Quinlan