An Example of a Google Bar Chart

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="dashboard">
    <div id="filter"></div>
    <div id="chart"></div>
</div>

CSS

.google-visualization-controls-slider-thumb {
      transition:width 100ms, margin 100ms;
    }

JavaScript

google.load('visualization', '1', {packages: ['controls']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Person');
        data.addColumn('number', 'Value');
        data.addColumn('number', 'Filter');

        data.addRows([
        	[0, 15, 2015],	    
            [1, 14, 2014],
            [2, 26, 2013],
            [3, 1, 2012],
            [4, 30, 2011]
        ]);
		var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
          var numberRange = new google.visualization.ControlWrapper({
              controlType:'NumberRangeFilter',
              containerId:'filter',
              options:{
                  filterColumnIndex:2,
                  ui:{
                      format:{pattern:''},
                      label:''
                  }
              }
      	})
          var chart = new google.visualization.ChartWrapper({
              chartType:'LineChart',
              containerId:'chart',
              view:{
                  columns:[0,1]
              }
          });
          
          google.visualization.events.addListener(numberRange, 'statechange', function() {
           var lowThumb = document.getElementById('filter').childNodes[0].childNodes[0].childNodes[1].childNodes[1];
      var highThumb = document.getElementById('filter').childNodes[0].childNodes[0].childNodes[1].childNodes[2];
      highThumb.style.width = 16 + "px";
      highThumb.style.marginLeft = 0;
      var highValue = numberRange.getState().highValue;
      var lowValue = numberRange.getState().lowValue;
      if (highValue === lowValue) {
        lowThumb.style.zIndex = 0;
        if (numberRange.getState().highThumbAtMaximum) {
          lowThumb.style.zIndex = 1;
           highThumb.style.marginLeft = 18 + "px";
          highThumb.style.width = 14 + "px";
        } else if...