SOURCE CODE: Uize.Widgets.HslSliders.Html (view docs)

Uize.module ({
  name:'Uize.Widgets.HslSliders.Html',
  required:[
    'Uize.Util.Html.Encode'
  ],
  builder:function () {
    'use strict';

    return Uize.package ({
      process:function (i) {
        function _cssClass (_class) {return m.cssClass (_class)}
        function _childHtml (_properties) {return m.childHtml (_properties)}
        function _encodeAttributeValue (_value) {return Uize.Util.Html.Encode.encode (_value)}
        var
          m = this,
          i = arguments [0],
          _idPrefix = i.idPrefix,
          _fragment0 = _cssClass ('sliderLabel'),
          _fragment1 = '">\n    <span id="',
          _fragment2 = '</span>\n    <div class="',
          _fragment3 = _cssClass ('sliderMinValue'),
          _fragment4 = '">0</div>\n    <div class="',
          _fragment5 = _cssClass ('sliderMaxValue'),
          _fragment6 = '</div>\n\n  <div class="',
          _fragment7 = '">100</div>\n  </div>\n  <div>'
        ;
        return (
          '<div id="' + _idPrefix + '" class="' + i['mCssBindings_rootNodeClasses'] + '">\n  <div class="' + _fragment0 + _fragment1 + _idPrefix + '-hueLabel' + '">' + _encodeAttributeValue (i['loc_hueLabel']) + _fragment2 + _fragment3 + _fragment4 + _fragment5 + '">360</div>\n  </div>\n  <div>' + _childHtml ({name:'hue',orientation:'horizontal'}) + _fragment6 + _fragment0 + _fragment1 + _idPrefix + '-saturationLabel' + '">' + _encodeAttributeValue (i['loc_saturationLabel']) + _fragment2 + _fragment3 + _fragment4 + _fragment5 + _fragment7 + _childHtml ({name:'saturation',orientation:'horizontal'}) + _fragment6 + _fragment0 + _fragment1 + _idPrefix + '-lightnessLabel' + '">' + _encodeAttributeValue (i['loc_lightnessLabel']) + _fragment2 + _fragment3 + _fragment4 + _fragment5 + _fragment7 + _childHtml ({name:'lightness',orientation:'horizontal'}) + '</div>\n</div>'
        );

      }
    });
  }
});