Динамичное изменение значения индикатора путём перетаскивания заполненной части курсором

Динамичное изменение значения индикатора путём перетаскивания заполненной части курсором

Мне нравится делать всякие интерактивные динамические штучки на сайте, где пользователи сами устанавливают настройки. Здесь нужно было изловчиться, чтобы как-то наглядно и просто продемонстрировать действие свойства border-image-slice.

• Значение из списка select в данном случае выбирать не удобно.
• Предоставить читателям возможность самим заполнять поле input тоже не вариант — велик шанс написать что-то не то.
• drag & drop JavaScript получился бы огромен, нужно было бы учесть, что перемещаться элемент должен только вертикально или только горизонтально.
• Цветную полоску у progress не понятно как расширять/сужать мышкой.

Поэтому я изобрела свой вариант. Он возможен благодаря свойству CSS resize, которое на момент написания статьи IE не поддерживается, в Опере — только для textarea.

<style>

/* линия-индикатор */

#blok {
  width: 100%;
  padding: 1px;
  border: 1.3em solid #eee;
  border-radius: 5px;
  -moz-box-sizing: border-box; box-sizing: border-box;
  background: #eee linear-gradient(#BCBCBC, #fff0f5);
  box-shadow: inset 0 1px 1px #575555, inset 0 -1px 1px #fff;
}
#blok div {
  max-width: 100%;
  width: 5%;
  height: 1.2em;
  resize: horizontal;
  overflow: auto;
  background: red linear-gradient(270deg, #ff0000 15px, #ffc0cb 30px);
}

/* банка CSS */

#banka {
  position: relative;
  width: 50%;
  margin: 0 auto;
  padding-top: 60%;
  border: 5px solid rgba(221,221,221,.9);
  border-radius: 40%/70%;
  background: linear-gradient(to right, rgba(221,221,221,.5), rgba(150,150,150,.5)), linear-gradient(#ff0000, #ffff00);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: auto, 100% 5%;
}

#banka:after {
  content: "";
  position: absolute;
  top: -3%;
  left: 22%;
  width: 55%;
  padding-top: 10%;
  border-radius: 60%;
  background: rgba(238,238,238,.6);
  box-shadow: 0 0 15px rgba(238,238,238,.9);
}

#banka:before {
  content: "";
  position: absolute;
  top: -10%;
  left: 15%;
  width: 70%;
  padding-top: 25%;
  border-radius: 40%;
  background: linear-gradient(rgba(150,150,150,.8), rgba(221,221,221,.3) 75%, rgba(221,221,221,.1) 75%);
}
</style>


<div id="blok"><div onMouseMove="onchangeWidth()"></div></div>
<div id="banka"></div>


<script>
function onchangeWidth() {
var blok = document.getElementById('blok');
var line = blok.getElementsByTagName('div')[0];
document.getElementById('banka').style.backgroundSize = 'auto, 100% ' + parseInt(line.offsetWidth / blok.offsetWidth * 100) + '%';
}
</script>