How to make a custom widget with a custom appearance?

[RolandoFlorez]

I have to make this widget to switch the opacity between layers:

but this widget has data-dojo-type tags, and the WAB shows me an error.

I was reading about _WidgetTemplateMixin, but I do not handle well the documentation yet.

So, how can I make the widget with that appearance, instead this?:

thanks a lot

[RolandoFlorez]

Robert, ready. I did it.

I get the same:

[RobertScheitlin__GISP]

Rolando,

   I'm not sure what to tell you. It would be best to zip up your widget and attach it so I can have a look at all of it.

[RolandoFlorez]

okey Robert, you can download here or here (from Google Drive).

Thanks Robert

[RobertScheitlin__GISP]

Rolando,

   You main issue was it data-dojo-attach-point="sliderNode" not dojo-attach-point="sliderNode" in the Widget.html

Widget.html

<div>
  <div data-dojo-attach-point="sliderNode"></div>
</div>‍‍‍

Widget.js

define([
        'dojo/_base/declare',
        'jimu/BaseWidget',
        'dijit/_WidgetsInTemplateMixin',
        'esri/dijit/HorizontalSlider',
        'dojo/dom',
        'dojo/dom-style'
    ],
    function(
        declare,
        BaseWidget,
        _WidgetsInTemplateMixin,
        HorizontalSlider,
        dom,
        domStyle) {
        //To create a widget, you need to derive from BaseWidget.
        return declare([BaseWidget, _WidgetsInTemplateMixin], {
            // Custom widget code goes here
            baseClass: 'jimu-widget-customwidget',
            horizontalSlider: null,
            //this property is set by the framework when widget is loaded.
            name: 'Slider',

            //methods to communication with app container:

            postCreate: function() {
                this.inherited(arguments);
                console.log('postCreate');
            },

            startup: function() {
                this.inherited(arguments);
                this.horizontalSlider = new HorizontalSlider({
                    labels: ["1", "5", "10"]
                }, this.sliderNode);
                this.horizontalSlider.showButtons = true;
                this.horizontalSlider.startup();
                console.log('startup');
            },

            onOpen: function() {
                console.log('onOpen');
                var style = {
                    left: '100px',
                    right: '250px',
                    top: '150px',
                    bottom: '40px',
                    width: 'auto'
                };
                domStyle.set(this.sliderNode, style);
            },

            onClose: function() {
                console.log('onClose');
            }

        });
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

manifest.json (line 15):

{
  "name": "Slider",
  "2D": true,
  "3D": false,
  "platform": "HTML",
  "version": "2.1",
  "wabVersion": "2.1",
  "author": "Esri R&D Center Beijing",
  "description": "This is the custom widget for slider",
  "copyright": "",
  "license": "http://www.apache.org/licenses/LICENSE-2.0",
  "properties": {
    "inPanel": false,
    "supportMultiInstance": false,
    "closeable": true
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RolandoFlorez]

Thank you very much

Now, I'm gonna modify it like the Opacity widget from the Layer List widget.