Clamp & Resize DOM Elements With Range Sliders – Range.js

Preview:

Description:

Range.js is a JavaScript library that enables a native range input to clamp or resize DOM elements.

How to use it:

1. Download and load the range.js JavaScript library in the document.

<script src="js/range.js"></script>

2. Initialize the Range.js.

range = new Range();

3. Enable a range input to shrink text or HTML lists.

<section data-range="true">
  <input type="range">
  <p>An example of sample text that you can reduce. Below is an excerpt from John Steinback's famous novel, <i>The Grapes of Wraph</i>.</p>
</section>

<section data-range="true">
  <input type="range">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
    <ul>
      <li>Nested two-one</li>
      <li>Nested two-two</li>
    </ul>
    <li>Item three</li>
    <ul>
      <li>Nested three-one</li>
      <li>Nested three-two</li>
    </ul>
    <li>Item four</li>
  </ul>
</section>

4. Enable a range input to resize an image.

<section data-range="true">
  <input type="range">
  <img src="image.jpg">
</section>

5. Customize the step size. Default: 1.

range = new Range(0.25);