Value does not update with clicking - Bootstrap Slider by Seiyria

Question

when I click between the ticks, it doesn't change the "current value" output. How can I fix this?

Maybe someone is able to help me. I will attach a snippet below, so u can try and test.

Thank you very much!

 var minSliderValue = $("#mySlider").data("slider-min");
        var maxSliderValue = $("#mySlider").data("slider-max");

        $('#mySlider').slider({             // if max 100, 150
            ticks: [1, 2, 3, 5, 10, 25, 50, 100],
            ticks_positions: [0, 10, 20, 35, 50, 65, 82.5, 100],
            ticks_labels: ["1x", "2x", "3x", "5x", "10x", "25x", "50x", "100x"],
            ticks_snap_bounds: 1, //0.5
            ticks_tooltip: true,
            step: 1,
            max: 100, //JS script
            value: 10,
            formatter: function (value) {
                return value + 'x';
            },
        });
            
        $("#leverage").on("keyup", function () {
            var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
            this.value = val > maxSliderValue ? maxSliderValue : val;
                $('#mySlider').slider('setValue', val);
            });

            // Get Value Output //Bug
            $("#mySlider").slider();
            $("#mySlider").on("slide", function (slideEvt) {
                $("#leverage").val(slideEvt.value);
            });

    

body {
  background-color: #0f121b!important;
  color: #fff!important;
  padding: 4rem 2rem;
}

#mySlider {
  margin: 2rem;
  width: 70%;
}

.slider-tick {
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    height: 14px !important;
    width: 14px !important;
    margin: 0.2rem;
}

.slider-handle {
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
}

.slider-track {
  background-image: -webkit-gradient(linear, left top, right top, from(#129b6b), color-stop(#e5d02b), to(#b44b53))!important;
  background-image: -o-linear-gradient(left, #129b6b, #e5d02b, #b44b53)!important;
  background-image: linear-gradient(to right, #129b6b, #e5d02b, #b44b53)!important;
}

.slider-selection.tick-slider-selection {
  background-color: transparent!important;
  background-image: none!important;
}

.slider-track-high {
  background-color: #2d343e!important;
  background-image: none!important;
}
    

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>


   <div style="text-align:center">
        <div>
            <input id="mySlider" data-slider-id='mySliderSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="number" id="leverage" min="1" max="100" value="10" 
             step="1" size="10" inputmode=" decimal">x
            <br />
        </div>

    

Answer 1

Use "change" instead of "slide" in the code below, also change slideEvt.value to slideEvt.value.newValue

$("#mySlider").on("slide", function (slideEvt) {
     $("#leverage").val(slideEvt.value.newValue);
});

 var minSliderValue = $("#mySlider").data("slider-min");
        var maxSliderValue = $("#mySlider").data("slider-max");

        $('#mySlider').slider({             // if max 100, 150
            ticks: [1, 2, 3, 5, 10, 25, 50, 100],
            ticks_positions: [0, 10, 20, 35, 50, 65, 82.5, 100],
            ticks_labels: ["1x", "2x", "3x", "5x", "10x", "25x", "50x", "100x"],
            ticks_snap_bounds: 1, //0.5
            ticks_tooltip: true,
            step: 1,
            max: 100, //JS script
            value: 10,
            formatter: function (value) {
                return value + 'x';
            },
        });
            
        $("#leverage").on("keyup", function () {
            var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
            this.value = val > maxSliderValue ? maxSliderValue : val;
                $('#mySlider').slider('setValue', val);
            });

            // Get Value Output //Bug
            $("#mySlider").slider();
            $("#mySlider").on("change", function (slideEvt) {
                $("#leverage").val(slideEvt.value.newValue);
            });

    

body {
  background-color: #0f121b!important;
  color: #fff!important;
  padding: 4rem 2rem;
}

#mySlider {
  margin: 2rem;
  width: 70%;
}

.slider-tick {
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    height: 14px !important;
    width: 14px !important;
    margin: 0.2rem;
}

.slider-handle {
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
}

.slider-track {
  background-image: -webkit-gradient(linear, left top, right top, from(#129b6b), color-stop(#e5d02b), to(#b44b53))!important;
  background-image: -o-linear-gradient(left, #129b6b, #e5d02b, #b44b53)!important;
  background-image: linear-gradient(to right, #129b6b, #e5d02b, #b44b53)!important;
}

.slider-selection.tick-slider-selection {
  background-color: transparent!important;
  background-image: none!important;
}

.slider-track-high {
  background-color: #2d343e!important;
  background-image: none!important;
}
    

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>


   <div style="text-align:center">
        <div>
            <input id="mySlider" data-slider-id='mySliderSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="number" id="leverage" min="1" max="100" value="10" 
             step="1" size="10" inputmode=" decimal">x
            <br />
        </div>