NumberRangeFilter behaves strangely with decimals in Google Charts - google-visualization

Question

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 docs 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.
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]
]);
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.
However I'm seeing two unexpected behaviors instead:
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.image of slider label behavior
2)The label on the minimum of the range does not include the lowest data point, despite displaying that bar on the graph:
image of nonsensical range
Has anyone seen this before dealing with decimals in google charts? Am I doing something wrong?
Full script below:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="numberRangeFilter_dashboard_div" style="border: 1px solid #ccc">
<p> </p>
<table class="columns">
<tr>
<td>
<div id="numberRangeFilter_control_div" style="padding-left: 2em"></div>
</td>
<td>
<div id="numberRangeFilter_chart_div"></div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
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);
}
</script>

Answer 1

Workaround: display the true selected range of the numberRangeFilter controller on the page using statechange events, and modifying html on page each time the event fires. Use these new text divs instead of the standard numberRangeFilter labels.
Clumsy, but it works for me.
google.visualization.events.addListener(control, 'statechange', selectHandler);
function selectHandler(e) {
var range_selected = control.getState()
document.getElementById("lower_range_label").innerHTML = "Lower Range:"+range_selected.lowValue
document.getElementById("upper_range_label").innerHTML = "Upper Range:"+range_selected.highValue
}