Zoom In/Out Text With A Range Slider - Content Zoom Slider

Zoom In/Out Text With A Range Slider - Content Zoom Slider
File Size: 5.12 KB
Views Total: 356
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Content Zoom Slider is a tiny & easy accessibility tool that allows you to zoom in or out of web pages by simply dragging a range slider. It can enlarge or shrink text at a specific location on the screen.

Perfect for the visually impaired who may have their zoom set at a higher level than normal, or for people with neck pain who need to increase and decrease the text size.

Works with all modern browsers which supports the scale() CSS function.

How to use it:

1. Load the content-zoom-slider.min.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/content-zoom-slider.min.js"></script>

2. This plugin uses Font Awesome Iconic Font for the zoom icons.

<link rel="stylesheet" href="/path/to/cdn/font-awesome/VERSION/css/all.min.css" />

3. Create a container to hold the zoom toolbar.

<div class="zoom-tool-bar"></div>

4. Call the function contentZoomSlider on the target container where the text content will be zoomed in/out.

<div id="content">
  ...
</div>
$(function () {
  $("#content").contentZoomSlider({
    toolContainer: ".zoom-tool-bar",
  });
});

5. Set the min/max scaling factor (percentage).

$(function () {
  $("#content").contentZoomSlider({
    toolContainer: ".zoom-tool-bar",
    min: 25, // 25%
    max: 200, // 100%
  });
});

6. Set the initial scaling factor (percentage).

$(function () {
  $("#content").contentZoomSlider({
    toolContainer: ".zoom-tool-bar",
    zoom: 100, // 100%
  });
});

7. Set the step size.

$(function () {
  $("#content").contentZoomSlider({
    toolContainer: ".zoom-tool-bar",
    step: 25, // 25%
  });
});

This awesome jQuery plugin is developed by asaakumawat. For more Advanced Usages, please check the demo page or visit the official website.