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

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:

• 10 Best Gauge Plugins In jQuery And Pure JavaScript/CSS

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.