Функция обновляющая позицию ползунка по переданному значению

Question

Помогите пожалуйста, мне необходимо написать функцию- которая будет динамически обновляться позицию ползунка по переданному в нее значению, а также функции по динамическому обновлению минимального и максимального значения.

    var connector = this;
    var element = connector.getElement();
    var state = connector.getState();


    $(element).html("<div class=\"main\">\n" +
        "  <input\n" +
        "      type=\"range\"\n" +
        "      class=\"slider\"\n" +
        "      name=\"participants\"\n" +
        "      id=\"rangeId\"\n" +
        "      min=\"1\"\n" +
        "      max=\"100\"\n" +
        "  >\n" +
        "  <span class=\"rangeslider__tooltip\" id =\"range-tooltip\"></span>\n" +
        "<div class=\"mydiv\"></div> \n" +
        "</div> \n"
    );

    setValues();

    const $element = $('input[type="range"]');
    const $tooltip = $('#range-tooltip')
    var thirdPart = state.maxValue / 3;

    const sliderStates = [
        {
            name: "low",
            tooltip: "Great, we're confident we can complete your project within <strong>24 hours</strong> of launch.",
            range: _.range(state.minValue, thirdPart)
        },
        {
            name: "med",
            tooltip: "Looks good! We can complete a project of this size within <strong>48 hours</strong> of launch.",
            range: _.range(thirdPart, thirdPart * 2)
        },
        {
            name: "high",
            tooltip: "With a project of this size we'd like to talk with you before setting a completion timeline.",
            range: _.range(thirdPart * 2, state.maxValue)
        },
    ];
    var currentState;
    var $handle

    $element
        .rangeslider({
            polyfill: false,
            onInit: function () {
                $handle = $('.rangeslider__handle', this.$range);
                updateHandle($handle[0], this.value);
                updateState($handle[0], this.value);
            }
        })
        .on('input', function () {
            updateHandle($handle[0], this.value);
            checkState($handle[0], this.value);
        });

    connector.update = function (val) {
        updateHandle($handle[0], val);
        updateState($handle[0], val);
        checkState($handle[0], val);
    }


// Update the value inside the slider handle
    function updateHandle(el, val) {
        el.textContent = val;
    }

// Check if the slider state has changed
    function checkState(el, val) {
        // if the value does not fall in the range of the current state, update that shit.
        if (!_.contains(currentState.range, parseInt(val))) {
            updateState(el, val);
        }
    }

    //set values to slider
    function setValues() {
        document.getElementById("rangeId").min = state.minValue;
        document.getElementById("rangeId").max = state.maxValue;
        document.getElementById("rangeId").value = state.value;
    }

// Change the state of the slider
    function updateState(el, val) {
        for (var j = 0; j < sliderStates.length; j++) {
            if (_.contains(sliderStates[j].range, parseInt(val))) {
                currentState = sliderStates[j];
                // updateSlider();
            }
        }

        // Update handle color
        $handle
            .removeClass(function (index, css) {
                return (css.match(/(^|\s)js-\S+/g) || []).join(' ');
            })
            .addClass("js-" + currentState.name);
        // Update tooltip
        $tooltip.html(currentState.tooltip);
    }

Answer 1

В документации вроде есть все нужные вам примеры

const $inputRange = $('input[type="range"]');

function setValue(value) {
  $inputRange.val(value).change();
}

function setMinMax(min, max) {
  let attributes = {
    min: min,
    max: max
  };
  
  $inputRange.attr(attributes).rangeslider('update', true);
}

БЛОГ НА HUSL

Функция обновляющая позицию ползунка по переданному значению

Ответы (1 шт):