使用 MDL 的带泪珠标签的滑块

Question

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

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

但 MDL 默认不包含带有泪珠标签的滑块。 Angular Material 不过包括一个。

如何添加类似于 Material 设计指南中的泪滴标签？

Answer 1

您可以通过添加 step 属性将 MDL 连续滑块变成离散滑块。前任。 step="10".

至于泪滴标签，那就有点难了。 MDL 没有 built-in 样式，因此您需要自己添加。以下内容应该可以帮助您入门。

注意： 定位 (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);
}

<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>

使用 MDL 的带泪珠标签的滑块

Slider with teardrop label using MDL

javascript

jquery

material-design

material-design-lite