---
template: "example.html"
title: "Bind HTML input example"
shortdesc: "Demonstrates two-way binding of HTML input elements to OpenLayers objects."
docs: >
  <p id="has-webgl" style="display: none">With the <a href="?renderer=webgl">WebGL renderer</a>, <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong> can also be controlled.</p>
  <div id="no-webgl" class="alert alert-warning" style="display: none">
    <h4>Warning!</h4>
    A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
    <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
  </div>
tags: "custom, control"
---
<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
</div>
 <div class="span4">
   <form class="">
     <fieldset>
       <legend>Layer</legend>
       <label class="checkbox" for="visible">
         <input id="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input id="opacity" type="range" min="0" max="1" step="0.01"/>
     </fieldset>
     <fieldset id="webgl" style="display: none">
       <label>hue</label>
       <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input id="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input id="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
     </fieldset>
   </form>
 </div>
 <div class="span4">
   <form class="">
     <fieldset>
       <legend>View</legend>
       <label>rotation</label>
       <input id="rotation" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>resolution</label>
       <input id="resolution" type="number" min="0" step="250"/>
     </fieldset>
   </form>
 </div>