前端问题求助input type=“range”问题求助

目前我在做这样一个功能，PC端和手机端同步显示某个进度条。
原理是这样的，当我点击PC端的进度条时，手机端要跟着同步显示

前端代码：

<div class="one">
                             <span style="font-size:20px; color:black">照明</span>
                             <input type="range" name="range" id="lighting_1" class="slider" value="0"/>
                             <span id="value1" style="display:block" class="value1">0%</span>
                         </div>

javascript代码：

function change1() {
 
    self_control = true;
    var value = $('#lighting_1').val();
    var valStr = value + "% 100%";
    var dataType = "lighting" + "_" + "1";
 
    $('#value1').html(value + "%");
    $('#lighting_1').css({
        "background-size": valStr
    })
    send(dataType, value);
 
};

现在的问题就是我在pc端点了之后，手机端的圆球没有跟着滚过去。

比如这里 我下面的示数是57% 但是那个圆球就是没到57，请问这个问题怎么解决。

这个问题相当于是pc和手机端的回显问题。
希望大佬们不吝赐教！