function rangeInput() {
  // setup bubble to display current value
  $('input[type=range]').each(function() {
    $(this).parent().addClass('range_wrapper')
    $(this).parent().prepend('<output class="bubble"></output>')
  })

  // On input change update displayed value for each slider
  $('input[type=range]').on('input click change', function () {
    $(this).addClass('myclass');
    var bubbleWrapEl = $(this).parent().find('output.bubble')[0]
    setBubble(this, bubbleWrapEl)
  });

  // Submit form only if all sliders needed have been touched
  $(".otree-btn-next").on("click", function() {
    var inputsNoMyClass = $('input[type=range]:not(.myclass)');
    var inputsMyClassSkip = $('input[type=range].myclassskip');
    if (inputsNoMyClass.length > 0 && inputsNoMyClass.length - inputsMyClassSkip.length !== 0) {
      alert("Veuillez choisir une option sur chaque axe");
      return false
    } else {
      return true
    }
  });
}

function setBubble(range, bubble) {
  bubble.innerHTML = range.value;
  const ratio = (range.value - range.min) / (range.max - range.min)

  const rangeStyle = getComputedStyle(range)
  const sliderWidth = range.clientWidth - parseFloat(rangeStyle.paddingLeft) - parseFloat(rangeStyle.paddingRight)
  const thumbWidth = 26 // see range_input.css
  const maxWidth = range.clientWidth - parseFloat(rangeStyle.paddingRight) - thumbWidth/2
  const minWidth = parseFloat(rangeStyle.paddingLeft) + thumbWidth/2
  const bubbleLeft = (ratio * (maxWidth - minWidth)) + thumbWidth - bubble.clientWidth/2;
  bubble.style.left = bubbleLeft + 'px'
}