Question

我目前正在使用Material Design Lite构建表单。

我的表单类似于this one。带有泪珠标签的discrete slider将是我在表单中轻松定义金额部分的最佳解决方案。

但默认情况下，MDL不包含带泪珠标签的滑块。 Angular Material包括一个。

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

Answer 1

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

至于泪珠标签，这有点难。 MDL并没有内置的风格，因此您需要自己添加它。以下内容应该让您入门。

注意：定位的计算（labelPosX）有点不稳定，我确信几分钟后会考虑将其清理干净。

<强>演示

＆＃13;

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)
};

＆＃13;

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);
}

＆＃13;

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />


<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--12-col">
    <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="20" tabindex="0" step="10" id="demo">
  </div>
</div>

＆＃13;

使用MDL的泪珠标签的滑块

1 个答案: