使用MDL的泪珠标签的滑块

我目前正在使用Material Design Lite构建一个表单.

我的表格与此类似.甲离散滑块,具有泪滴标签,然后将被用于容易地确定在我的形式的量的部件的最佳解决方案.

但默认情况下,MDL不包含带泪珠标签的滑块.但是角度材料包括一个.

如何添加类似于"材料设计指南"中的泪珠标签？

您可以通过添加step属性将MDL连续滑块变为离散滑块.防爆.step="10".

至于泪珠标签,这有点难.MDL没有内置样式,因此您需要自己添加它.以下内容应该让您入门.

注意:定位(labelPosX)的计算有点不稳定,我肯定会花几分钟考虑它会清理它.

演示

const demoInput = document.getElementById('demo');
const labelMaker = function (e) {
  const input = e.target || e;
  const label = input.parentElement.querySelectorAll('.label')[0] || document.createElement('div');
  const labelInner = label.firstChild || document.createElement('div');
  const parentWidth = input.parentElement.offsetWidth;
  const inputWidth = input.offsetWidth ;
  const labelOffset = (parentWidth - inputWidth) / 2;
  const labelPosX = inputWidth * (input.value/100) + ((100 - input.value) * 14)/100;

  label.classList.add('label');
  if (input.value == 0) {
    label.classList.add('zeroed');
  } else {
    label.classList.remove('zeroed');
  }
  labelInner.innerText = input.value;
  label.appendChild(labelInner);
  label.style.left = labelPosX + 'px';
  input.parentElement.appendChild(label);
}

demoInput.addEventListener('input', labelMaker);

window.onload = function() {
  labelMaker(demoInput)
};

body {
  padding: 100px 0 0 0;
}

.label {
  display: block;
  position: absolute;
  top: -55px;
  width: 25px;
  height: 25px;
  border-radius: 0 50% 50% 50%;
  background-color: rgb(63, 81, 181);
  transform: rotate(-135deg);
  margin-top: 20px;
}

.label div {
  line-height: 25px; 
  color: #ffffff;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 1px;
  text-align: center;
  transform: rotate(135deg);
}

.label.zeroed {
  background-color: rgba(0, 0, 0, 0.3);
}