templates/_includes/radiusslider.html.twig line 1

Open in your IDE?
  1. <script>
  2. {{ inlineJsWrapperBegin() }}
  3. window.appFunctions.setupRadiusSlider = function (idOfSliderElement, selectorOfTextElementToChange, selectorOfFormElementToChange, startValue) {
  4. var availabilityRadiuses = [];
  5. {% for radius in constant('App\\Value\\ZipcodeRadiusesValue::ALL') %}
  6. availabilityRadiuses.push({{ radius }});
  7. {% endfor %}
  9. var sliderElement = document.getElementById(idOfSliderElement);
  10. noUiSlider.create(sliderElement, {
  11. start: [startValue],
  12. connect: [true, false],
  13. range: {
  14. 'min': 5,
  15. '33%': 15,
  16. '66%': 30,
  17. 'max': 50
  18. },
  19. snap: true,
  20. pips: {
  21. mode: 'values',
  22. values: availabilityRadiuses,
  23. density: 100
  24. }
  25. });
  27. // Ensure jlls-slider class is present for styling
  28. sliderElement.classList.add('jlls-slider');
  30. sliderElement.noUiSlider.on('change', function () {
  31. jQuery(selectorOfFormElementToChange).val(
  32. Math.floor(sliderElement.noUiSlider.get())
  33. );
  34. jQuery(selectorOfTextElementToChange).text(
  35. Math.floor(sliderElement.noUiSlider.get())
  36. );
  37. });
  38. };
  39. {{ inlineJsWrapperEnd() }}
  40. </script>