title: Bootstrap slider bar error slider is not defined
body: <p>I use the slider from <a href="https://github.com/seiyria/bootstrap-slider" rel="nofollow noreferrer">github</a> and decided to use 1 example from <a href="http://seiyria.com/bootstrap-slider/" rel="nofollow noreferrer">here</a>.
  Controller does not reset, an error:</p>
  
  <pre><code>individual_task_3.HTML code:32 Uncaught ReferenceError: slider is not defined 
  </code></pre>
  
  <p>and points to the line   </p>
  
  <pre><code>var slider = new Slider('ex1', {
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Индивидуальное задание 3&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="../css/bootstrap-slider.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="../css/style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-inverse"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" href="../index.html"&gt;Дегтярев Данил | Компьютерная геометрия и графика&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;ol class="breadcrumb"&gt;
          &lt;li class="breadcrumb-item"&gt;&lt;a href="../index.html"&gt;Главная&lt;/a&gt;&lt;/li&gt;
          &lt;li class="breadcrumb-item"&gt;&lt;a href="individual_task_menu.html"&gt;Индивидуальные задания&lt;/a&gt;&lt;/li&gt;
          &lt;li class="breadcrumb-item active"&gt;Индивидуальное задание 3&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="container"&gt;
          &lt;h1&gt;Индивидуальное задание&lt;/h1&gt;
          &lt;p&gt;&lt;h4&gt;Задание: &lt;/h4&gt;Добавить слайдер для плавного изменения цвета каждой вершины треугольника на цвет соседней вершины&lt;/p&gt;
          &lt;input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt;
              &lt;canvas id="canvas3D"&gt;Ваш браузер не поддерживает элемент canvas&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          var slider = new Slider('ex1', {
              formatter: function(value) {
                  return 'Current value: ' + value;
              }
          });
      &lt;/script&gt;
      &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
          varying highp vec4 vColor;
            void main(void) {
              gl_FragColor = vColor;
            }
      &lt;/script&gt;
      &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
          attribute vec3 aVertexPosition;
          attribute vec3 aVertexColor;
          varying highp vec4 vColor;
          void main(void) {
              gl_Position = vec4(aVertexPosition, 1.0);
              vColor = vec4(aVertexColor, 1.0);
          }
      &lt;/script&gt;       
      &lt;script src="../js/jquery-3.2.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../js/three.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../js/canvas_style.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../js/individual task/individual_task_3.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../js/bootstrap-slider.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>
  All the libraries are installed and correct</p>