• FRAMEWORK

Default Slider

For sample use, see the uses below.

$(function () {
    var handle = $("#sliderDefaultHandle");
    $("#sliderDefault").slider({
        range: "min",
        value: 35,
        min: 0,
        max: 100,
        create: function () {
            handle.text($(this).slider("value"));
        },
        slide: function (event, ui) {
            handle.text(ui.value);
        }
    });
});

More information: https://jqueryui.com/slider

Range Slider

For sample use, see the uses below.

$(function () {
    $("#sliderRange").slider({
        range: true,
        min: 0,
        max: 500,
        values: [35, 350],
        slide: function (event, ui) {
            $("#amount").val(ui.values[0] + "TL - " + ui.values[1] + "TL");
        }
    });
    $("#amount").val("$" + $("#sliderRange").slider("values", 0) +
        " - $" + $("#sliderRange").slider("values", 1));
});

More information: https://jqueryui.com/slider

Scale Slider

For sample use, see the uses below.

  $(function () {
      $(".fo-slider-container").each(function () {
          const wrapper = $(this);
          const slider = wrapper.find(".fo-slider-scale-slider");
          const valueLabel = wrapper.find(".fo-slider-scale-value");

          let initialValue = parseInt(valueLabel.text().replace("%", "")) || 0;

          slider.slider({
              min: 0,
              max: 100,
              value: initialValue,
              range: "min",
              slide: function (event, ui) {
                  valueLabel.text('%' + ui.value);
              }
          });
      });
  });

More information: https://jqueryui.com/slider