title: Increase the radius of circle based on the slider value
body: <p>I have a map with a single marker at the moment. I have created a circular radius around this marker. This implies the service area of given marker position. </p>
  
  <p>I have implemented a slider below the map. Now, I am trying to increase the radius of circle based on sliding this slider. </p>
  
  <p>I have no idea how to start. </p>
  
  <p>Can anybody help me?</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 myloc = new L.LatLng(39.9042, 116.4074);
  var map = L.map('map').setView(myloc, 15);
  
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &amp;copy; &lt;a href="https://www.openstreetmap.org/"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="https://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="https://www.mapbox.com/"&gt;Mapbox&lt;/a&gt;',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1Ijoic2FuaW5kcmEiLCJhIjoiY2pqam5qZzZnMHRycTNrbWR3ZGF4Mmd5eSJ9.ZRIVhopMmACa80OQ0yZN3g'
  }).addTo(map);
  
  var marker = L.marker(myloc).addTo(map);
  
  var marker = L.marker(myloc).addTo(map);
  
  var circle = L.circle(myloc, {
    color: '#f03',
    weight: 0.1,
    fillColor: '#f03',
    fillOpacity: 0.4,
    radius: 100
  }).addTo(map);
  
  var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;
  
  slider.oninput = function() {
    output.innerHTML = this.value;
  }
  
  
  
  function clickCircle(e) {
    var clickedCircle = e.target;
  }
  
  $('#myRange').on('change', function() {
    clickCircle();
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map {
    width: 400px;
    height: 200px;
    border: 1px solid #AAA;
  }
  
  .search-scope {
    margin-top: 10px;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" /&gt;
  &lt;script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"&gt;&lt;/script&gt;
  
  &lt;div id="map"&gt;&lt;/div&gt;
  
  &lt;div class="search-scope"&gt;
    &lt;input type="range" min="100" max="1000" value="100" class="slider" id="myRange"&gt;
    &lt;p&gt;Radius:
      &lt;span id="demo"&gt;&lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>