function changing(event, ownerInstance) {
  setActiveBarPercent(
    ownerInstance,
    event.detail.value,
    event.currentTarget.dataset.max
  );
  ownerInstance.callMethod("setFilterDistance", event);
  return false;
}

function changeValue(newValue, oldValue, ownerInstance, instance) {
  setActiveBarPercent(ownerInstance, newValue, instance.getDataset().max);
  return false;
}

function setActiveBarPercent(ownerInstance, value, max) {
  console.log(ownerInstance);
  var active = ownerInstance.selectComponent(".slider_active");
  var block = ownerInstance.selectComponent(".slider_block");
  var width = (parseInt(value) / parseInt(max)) * 100;
  if (width < 1) {
    width = 0;
  }
  active.setStyle({ width: width + "%" });
  block.setStyle({
    left: width + "%",
    transform: "translateX(-" + width + "%)",
  });
}

module.exports = {
  changing: changing,
  changeValue: changeValue,
};