Main JavaScript code for sliderQuery widget

LayerDefinition.js

define([
    'dojo/_base/declare',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/form/Button',
    'dijit/form/HorizontalSlider',
    'dijit/form/TextBox',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/dom', 
    'dojo/domReady!',
    'dojo/on',
    'dojo/text!./LayerDefinition/templates/LayerDefinition.html',
    'dojo/topic',
    'xstyle/css!./LayerDefinition/css/LayerDefinition.css',
    'dojo/dom-construct',
    'dojo/_base/Color',

    'esri/graphic',
    'esri/IdentityManager',
    'esri/tasks/QueryTask',
    'esri/tasks/query',
    'esri/symbols/SimpleFillSymbol',
    'esri/symbols/SimpleLineSymbol'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Button, HorizontalSlider,
    TextBox, lang, arrayUtils, dom, ready, on, template, topic, css, domConstruct, Color, Graphic, 
    IdentityManager, QueryTask, Query, SimpleFillSymbol, SimpleLineSymbol
    ) {
    var map;

    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        name: 'SliderQuery',
        map: true,
        widgetsInTemplate: true,
        templateString: template,
        mapClickMode: null,

        postCreate: function(){
            this.inherited(arguments);
            map = this.map;
            var slider = new HorizontalSlider({
                name: "slider",
                value: 5,
                minimum: -10,
                maximum: 10,
                intermediateChanges: true,
                style: "width:300px;",
                onChange: function(value){
                    dom.byId("sliderValue").value = value;
                }
            }, "slider").startup();
        },

        AddStation: function () {
          var gasMin = document.getElementById('gasMin').value;
          var oilMin = document.getElementById('oilMin').value;

          var SQL = "TotalGasMCF2014 > " + gasMin + " OR TotalOilBBL2014 > " + oilMin;
          var url = this.mapService;
          
          var query = new Query();
          query.returnGeometry = true;
          query.outFields = ["TotalOilBBL2014"];
          query.where = SQL;

          var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 
            new Color([0, 255, 255, 255]), 3), new Color([0, 255, 255, 0.30]));

          var queryTask = new QueryTask(url);
          queryTask.execute(query,showResults);

          function showResults(featureSet) {
            //remove all graphics on the maps graphics layer
            this.map.graphics.clear();

            //Performance enhancer - assign featureSet array to a single variable.
            var resultFeatures = featureSet.features;

            //Loop through each feature returned
            for (var i=0, il=resultFeatures.length; i<il; i++) {
              //Get the current feature from the featureSet.
              //Feature is a graphic
              var graphic = resultFeatures[i];
              graphic.setSymbol(symbol);

              //Add graphic to the map graphics layer.
              this.map.graphics.add(graphic);
            }
          }
        },

        onAddStation: function()
        {
          this.AddStation();
        },


        onClear: function()
        {
          this.map.graphics.clear();                
        }

    });
});