js fixes

Author: MacGyer

src/lib/MaterializeWidgetTrait.php

@@ -103,7 +103,7 @@ protected function registerClientEvents()
             /** @var View $view */
             $view = $this->getView();
             $id = $this->options['id'];
-            $js[] = "var elem_$id = document.getElementById('$id');";
+            $js[] = "let elem_$id = document.getElementById('$id');";
             foreach ($this->clientEvents as $event => $handler) {
                 $js[] = "elem_$id.addEventListener('$event', $handler);";
             }

src/widgets/form/RangeInput.php

@@ -131,7 +131,7 @@ public function init()
             }
 
             if (!isset($this->sliderOptions['id'])) {
-                $this->sliderOptions['id'] = $this->getId();
+                $this->sliderOptions['id'] = "{$this->getId()}-slider";
             }
 
             $this->addUpdateEvent();
@@ -145,14 +145,15 @@ public function init()
      */
     protected function addUpdateEvent()
     {
+        $containerId = $this->options['id'];
         $sliderId = $this->sliderOptions['id'];
         $this->inputOptions['data-slider-target'] = $sliderId;
 
         if (!isset($this->clientEvents['update'])) {
             $this->clientEvents['update'] = new JsExpression(<<<JS
 function (values, handle) {
-    var value = values[handle];
-    $('[data-slider-target="{$sliderId}"]').val(value);
+    let value = values[handle];
+    document.querySelector('#$containerId [data-slider-target="{$sliderId}"]').value = value;
 }
 JS
             );
@@ -189,14 +190,6 @@ protected function renderHtml5RangeInput()
     {
         $html[] = Html::beginTag('div', ['class' => 'range-field']);
 
-        // workaround for: https://github.com/Dogfalo/materialize/issues/5761
-        if (!isset($this->inputOptions['min'])) {
-            $this->inputOptions['min'] = 0;
-        }
-        if (!isset($this->inputOptions['max'])) {
-            $this->inputOptions['max'] = 100;
-        }
-
         if ($this->hasModel()) {
             $html[] = Html::activeInput('range', $this->model, $this->attribute, $this->inputOptions);
         } else {
@@ -253,7 +246,7 @@ protected function registerClientScripts()
         if ($this->clientOptions !== false) {
             $options = empty($this->clientOptions) ? '{}' : Json::htmlEncode($this->clientOptions);
             $view->registerJs(<<<JS
-var $varName = document.getElementById('$id');
+let $varName = document.getElementById('$id');
 noUiSlider.create($varName, {$options});
 JS
             );