title: change openlayer 3 circle radius using html 5 range slider
body: <p>Trying to change radius of circle using html 5 range  slider but its not removing 1st circle layer but map.removeLayer not working I done this befor using openlayer 2 but its not working with openlayer 3 I added the code.</p>
  
  <p><a href="http://jsfiddle.net/zLjae81b/18/" rel="nofollow">Working copy of openlayer 2</a></p>
  
  <p>Need same in open layer 3 below is the code</p>
  
  <p>IMP - Required range of slider from 1 miles to 5 miles  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var features = [];
  var radius = $('#range').val();
  var longitude = 400000;
  var latitude = 300000;
  var point1 = new ol.Feature(
      new ol.geom.Point([400000, 400000])
  );
  //console.log(point1);
  //alert(radius);
  //var point1 = new ol.geom.Point(400000,400000);
  
  var circle = new ol.geom.Circle([longitude, latitude], radius);
  features.push(new ol.Feature({
      geometry: circle
  }));
  var circleSource = new ol.source.Vector({
      features: features
  });
  var layer = new ol.layer.Vector({
      source: circleSource,
      style: [
      new ol.style.Style({
          stroke: new ol.style.Stroke({
              color: 'blue',
              width: 3
          }),
          fill: new ol.style.Fill({
              color: 'rgba(0, 0, 255, 0.1)'
          })
      })]
  });
  
     // create map
        var map = new ol.Map({
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            })
  
  
          ],
          target: 'map',
          view: new ol.View({
            center: [400000, 300000],
            zoom: 2
          })
        });
         
  map.addLayer(layer);
        
  
  
        function updateTextInput(val) {
            document.getElementById('range').value=val; 
            radius  = $( "#range" ).val();
            console.log(radius);
  
            map.removeLayer(layer);
          //   increaseRadius(30000);
          var features = [];
  //var radius = 100000;
  var longitude = 400000;
  var latitude = 300000;
  var point1 = new ol.Feature(
      new ol.geom.Point([400000, 400000])
  );
  //alert(radius);
  //var point1 = new ol.geom.Point(400000,400000);
  
  var circle = new ol.geom.Circle([longitude, latitude], radius);
  features.push(new ol.Feature({
      geometry: circle
  }));
  var circleSource = new ol.source.Vector({
      features: features
  });
  var layer = new ol.layer.Vector({
      source: circleSource,
      style: [
      new ol.style.Style({
          stroke: new ol.style.Stroke({
              color: 'blue',
              width: 3
          }),
          fill: new ol.style.Fill({
              color: 'rgba(0, 0, 255, 0.1)'
          })
      })]
  });
  map.addLayer(layer);
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height:100%;
      width: 100%;
      padding:5px;
      margin:0px;
  }
  #map {
      height:90%;
      width: 95%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"&gt;&lt;/script&gt;
  
  &lt;div&gt;
    &lt;input type="range" class="slider" name="rangeInput" min="1" max="5" onchange="updateTextInput(this.value);"&gt;
                   &lt;input type="text" id="range" value="1"&gt;
  &lt;/div&gt;
  &lt;div id="map"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>