window.onload = function () {
    inital_slider()
}

function inital_slider (){
    var $range = $(".range_slider_form_filters"),
        $inputFrom = $(".input_f_slider_start"),
        $inputTo = $(".input_f_slider_end"),
        instance,
        min = 0,
        max = 1000,
        from = 0,
        to = 0;
    $range.ionRangeSlider({
        skin: "round",
        type: "double",
        min: min,
        max: max,
        from: 0,
        to: 1000,
        onStart: updateInputs,
        onChange: updateInputs
    });
    instance = $range.data("ionRangeSlider");

    function updateInputs (data) {
        from = data.from;
        to = data.to;

        $inputFrom.prop("value", from);
        $inputTo.prop("value", to);
    }

    $inputFrom.on("input", function () {
        var val = $(this).prop("value");

        // validate
        if (val < min) {
            val = min;
            $inputFrom[0].value = val
        } else if (val > to) {
            val = to;
            $inputFrom[0].value = val
        }

        instance.update({
            from: val
        });
    });

    $inputTo.on("input", function () {
        var val = $(this).prop("value");

        // validate
        if (val < from) {
            val = from;
            $inputTo[0].value = val
        } else if (val > max) {
            val = max;
            $inputTo[0].value = val
        }

        instance.update({
            to: val
        });
    });
}