Javascript jquery范围滑块开关事件侦听器

我试图创建一个按钮，可以将jquery范围滑块从使用内部值切换到使用外部值，反之亦然。除了事件侦听器函数外，其他所有函数都运行良好。我该如何改变这一点

我拥有的html：

<label for="direction" class="slider">Direction: <span class="swap-direction"></span></label>
<input id="direction" type="text" name="direction">
<div id="slider-direction"></div>

---

除了移动滑块时使用的事件侦听器外，其他一切都正常工作。我也希望它能转换。有人有想法吗？

我不确定我是否理解你的意图，但这就是问题所在吗？这确实说明了我的问题所在。当我点击按钮时，值实际上会反转。但是，当我在之后滑动滑块时，值会返回到其原始位置

$("#slider-direction").slider({
    range: true,
    min: 0,
    max: 359,
    values: [45, 300],
    step: 1,
    slide: function(event, ui){
        $("#direction").val(ui.values[1] + "deg  tot  " + ui.values[0] + "deg");
    }
});
$("#direction").val($("#slider-direction").slider("values", 1) + "deg  tot  " + $( "#slider-direction" ).slider("values", 0 ) + "deg" );
$('#slider-direction, #slider-direction .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');
$('label.slider span.swap-direction').click(function(){
    $('#slider-direction, #slider-direction .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');
    var richtingwaardes = $("#direction").val();
    var richtingwaardes = richtingwaardes.match(/\d+/g);


    $("#direction").val(richtingwaardes[1] + "deg  tot  " + richtingwaardes[0] + "deg");
    $("#slider-direction").on("slide", function(event, ui) {
        $("#direction").val(ui.values[1] + "deg  tot  " + ui.values[0] + "deg");
    });
});