How to create a new custom widget (ruler)

I am a beginner in dojo, I want to make a new widget like the photo, I want to create a text editing rule like the word office, but I do not know where to start, does someone guide me to do it?Capture

I made one, thank you for your wonderful project:
source code
html :

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" type="text/css" href="dojox/form/resources/RangeSlider.css">
    <script>dojoConfig = {async: true, parseOnLoad: true}</script>
    <script src="dojo/dojo.js"></script>
    <script src="demo/SliderWidget.js"></script>
</head>
<body >
<div class="tundra">
<div id="rangeSlider"></div>
<div id="slider"></div>
</div>
<script>
    require(["dojo/parser", "dojo/dom", "demo/SliderWidget", "dojo/domReady!"],
        function(parser, dom, SliderWidget ){
            parser.parse();
            var rangeSlider = dom.byId("rangeSlider");
            var slider = dom.byId("slider");
            var widget = new SliderWidget();
            widget.placeAt(rangeSlider);
            widget.placeAt(slider);
        });
</script>
</body>
</html>

javascript :

define(["dojo/dom-construct","dojo/_base/declare","dijit/_WidgetBase",
"dojo/dom","dijit/form/HorizontalSlider","dijit/form/HorizontalRule","dojox/form/HorizontalRangeSlider"],
function(domConstruct, declare, _WidgetBase, dom, HorizontalSlider,HorizontalRule, HorizontalRangeSlider){

return declare([_WidgetBase], {

    postCreate: function() {
        this._createRuler();
    },

    _createRuler: function() {
        var rangeSlider = new HorizontalRangeSlider({
            name: "rangeSlider",
            value: [0,100],
            minimum: 0,
            maximum: 100,
            intermediateChanges: true,
            style: "width:300px;",
            onChange: function () {

            }
        }, "rangeSlider");

        var sliderNode =  dom.byId("rangeSlider");
        var rulesNode = domConstruct.create("div", null, sliderNode);
        var hRuler = new HorizontalRule({
            container: "bottomDecoration",
            count: 25,
            style: "width:100%;height:1em;font-size:20%;color:gray;"
        }, rulesNode);

         var slider = new HorizontalSlider({
             name: "slider",
             value: 0,
             minimum: 0,
             maximum: 100,
             discreteValues:100,
             intermediateChanges: true,
             style: "width:300px;",
         }, "slider");
        slider.sliderHandle.classList.replace("dijitSliderImageHandleH","dijitSliderImageHandleV");
        rangeSlider.addChild(hRuler);
        rangeSlider.startup();
        slider.startup();
    },
});

});

result:
Capture