Create A Flat Barometer With jQuery And CSS/CSS3 - Barometer.js

Create A Flat Barometer With jQuery And CSS/CSS3 - Barometer.js
File Size: 3.72 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Barometer.js is a small jQuery plugin that helps you render a basic flat barometer & gauge interface to measure temperature, humidity, air pressure or anything you can imagine.

The plugin also generates an input field next to the barometer that you can adjust the barometer value by clicking the up/down arrows.

Built with JavaScript (jQuery) and CSS/CSS3. No Canvas and SVG required.

See also:

How to use it:

1. Insert the necessary JavaScript and Stylesheet into the html document.

<link rel="stylesheet" href="./includes/css/style.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="./includes/js/barometer.js"></script>

2. Create an empty container to place the barometer.

<div id="barometer"></div>

3. The JavaScript to generate a absic barometer on the page.

$(function(){
  $('#barometer').barometer();
});

4. Set the initial value (the angle of rotation). Default: 0.

$(function(){
  $('#barometer').barometer({
    startvalue: "-25"
  });
});

5. Set the step size. Default: 5.

$(function(){
  $('#barometer').barometer({
    steps: 10
  });
});

6. Override the default placeholder text displayed on the left side of the input field.

$(function(){
  $('#barometer').barometer({
    placeholder: "Insert rotation degrees"
  });
});

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