title: NumberRangeFilter behaves strangely with decimals in Google Charts
body: <p>I'm having trouble getting the numberRangeFilter control for google charts to play nicely with decimals. To illustrate the problem, I've modified the example from the <a href="https://developers.google.com/chart/interactive/docs/gallery/controls#numberrangefilter" rel="nofollow noreferrer">docs</a> to have five data points, some with decimals. I've also set the step property of the numberRangeFilter to move by increments of 0.1.</p>
  
  <pre><code>var control = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'numberRangeFilter_control_div',
    'options': {
      'filterColumnIndex': 1,
      'ui':{
          'showRangeValues':true,
          'step':0.1
      }
  
    }
  });
  
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Age'],
    ['Robert', 7.0],
    ['John', 7.5],
    ['Aaron', 8.0],
    ['Aaron', 8.3],
    ['Jessica', 8.7]
  ]);
  </code></pre>
  
  <p>I would expect the slider to start with all data included, move in increments of 0.1, and filter out datapoints as the range is adjusted. </p>
  
  <p>However I'm seeing two unexpected behaviors instead:</p>
  
  <p>1) The filter range labels don't update properly as I move the max range slider. The max range label reads 8.7 even after I slide it three steps to the left. It filters out data as expected, but the labels don't update, so it continues to read 8.7.<a href="https://i.stack.imgur.com/PHaDm.png" rel="nofollow noreferrer">image of slider label behavior</a></p>
  
  <p>2)The label on the minimum of the range does not include the lowest data point, despite displaying that bar on the graph:
  <a href="https://i.stack.imgur.com/fhhaX.png" rel="nofollow noreferrer">image of nonsensical range</a></p>
  
  <p>Has anyone seen this before dealing with decimals in google charts? Am I doing something wrong?</p>
  
  <p>Full script below:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  
  &lt;div id="numberRangeFilter_dashboard_div" style="border: 1px solid #ccc"&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;table class="columns"&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div id="numberRangeFilter_control_div" style="padding-left: 2em"&gt;&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div id="numberRangeFilter_chart_div"&gt;&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    google.charts.load('current', {packages:['corechart', 'table', 'gauge', 'controls']});
    google.charts.setOnLoadCallback(drawNumberRangeFilter);
  
    function drawNumberRangeFilter() {
      var dashboard = new google.visualization.Dashboard(
          document.getElementById('numberRangeFilter_dashboard_div'));
  
      var control = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'numberRangeFilter_control_div',
        'options': {
          'filterColumnIndex': 1,
          'ui':{
              'showRangeValues':true,
              'step':0.1
          }
  
        }
      });
  
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Age'],
        ['Robert', 7.0],
        ['John', 7.5],
        ['Aaron', 8.0],
        ['Aaron', 8.3],
        ['Jessica', 8.7]
      ]);
  
  
      var chart = new google.visualization.ChartWrapper({
        'chartType': 'BarChart',
        'containerId': 'numberRangeFilter_chart_div',
        'options': {
          'width': 400,
          'height': 300,
          'hAxis': {'minValue': 0, 'maxValue': 60},
          'chartArea': {top: 0, right: 0, bottom: 0}
        }
      });
  
  
  
      dashboard.bind(control, chart);
      dashboard.draw(data);
  
    }
  &lt;/script&gt;
  </code></pre>