CODEWITHSUNDEEP
javascriptjquerymaterial-designmaterial-design-lite
Lucas
Lucas

Reputation: 93

Slider with teardrop label using MDL

I am currently building a form with Material Design Lite.

My form is similar to this one. A discrete slider, with a teardrop label, would then be the best solution for easily defining parts of an amount in my form.

But MDL doesn't include a slider with a teardrop label by default. Angular Material includes one, though.

How can I include a teardrop label similar to the one in the Material Design Guidelines ?

Upvotes: 1

Views: 1399

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62861

You can make a MDL continuous slider into a discrete slider by adding a step attribute. Ex. step="10".

As for the teardrop label, that's a bit harder. MDL doesn't have an built-in style for that so you'd need to add it yourself. The following should get you started.

Note: the calculation for the positioning (labelPosX) is a bit wonky and I'm sure a few minutes thinking about it would clean it up.

Demo

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>

Upvotes: 6

Related Questions