Slider

{
  "id": "mySliderControl",
  "controlType": "htmlTemplate",
  "widthClassMd": "col-md-4",
  "refersToConfigSource": "",
  "htmlTemplateContent": "<style>\r\n    .slidecontainer {\r\n\r\n        width: 100%;\r\n        /* Width of the outside container */\r\n    }\r\n\r\n    /* The slider itself */\r\n    .slider {\r\n        -webkit-appearance: none;\r\n        /* Override default CSS styles */\r\n        appearance: none;\r\n        width: 100%;\r\n        /* Full-width */\r\n        height: 25px;\r\n        /* Specified height */\r\n        background: #d3d3d3;\r\n        /* Grey background */\r\n        outline: none;\r\n        /* Remove outline */\r\n        opacity: 0.7;\r\n        /* Set transparency (for mouse-over effects on hover) */\r\n        -webkit-transition: .2s;\r\n        /* 0.2 seconds transition on hover */\r\n        transition: opacity .2s;\r\n    }\r\n\r\n    /* Mouse-over effects */\r\n    .slider:hover {\r\n        opacity: 1;\r\n        /* Fully shown on mouse-over */\r\n    }\r\n\r\n    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */\r\n    .slider::-webkit-slider-thumb {\r\n        -webkit-appearance: none;\r\n        /* Override default look */\r\n        appearance: none;\r\n        width: 25px;\r\n        /* Set a specific slider handle width */\r\n        height: 25px;\r\n        /* Slider handle height */\r\n        background: #04AA6D;\r\n        /* Green background */\r\n        cursor: pointer;\r\n        /* Cursor on hover */\r\n    }\r\n\r\n    .slider::-moz-range-thumb {\r\n        width: 25px;\r\n        /* Set a specific slider handle width */\r\n        height: 25px;\r\n        /* Slider handle height */\r\n        background: #04AA6D;\r\n        /* Green background */\r\n        cursor: pointer;\r\n        /* Cursor on hover */\r\n    }\r\n</style>\r\n<div class=\"slidecontainer\">\r\n    <input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"slider rangeSlider\" >\r\n</div>",
  "events": [
    {
      "name": "onSubDataRequest",
      "code": "$(app.getHtmlElement(\"mySliderControl\")).find(\".rangeSlider\")[0].oninput = function() {\r\n    app.setFieldValue(\"myOutput\", this.value);\r\n}"
    }
  ],
  "index": 5
}