selenium拖动滑块（slider）到指定值

我需要拖动网页上滑块到指定的值，但是实际上精度总是差一些，而且看不到拖动效果，大家帮忙看看是什么原因

img

import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
def set_slider_value(sliderValue):
    """
    1.根据滑轨的长度和支持的值的范围计算出滑块每移动1个值对应的像素-per_px
    2.sliderValue为要设置的值，需要移动的像素是sliderValue*per_px
    3.用滑轨的起点x坐标+sliderValue*per_px即可得到要移动到的位置
    :return:
    """
    print("需要设置滑块的值为：",sliderValue)
    driver.get(r"file:///D:\3.html")
    driver.maximize_window()
    time.sleep(3)
    act = ActionChains(driver)
    """定位滑轨元素"""
    slider_ele=driver.find_element_by_css_selector('[type="range"]')
    print(slider_ele.rect)
    #滑轨的起点坐标和高宽
    sliderH,sliderW,sliderX,sliderY=slider_ele.rect.values()
    """滑轨支持的值范围"""
    slider_min=float(slider_ele.get_property("min"))
    slider_max=float(slider_ele.get_property("max"))
    current_slider_value = float(slider_ele.get_property("value"))
    """滑块值每变化1对应的像素(px)"""
    per_px=sliderW/(slider_max-slider_min)
    print("per_px:",per_px)
    print("滑块初始值为:",slider_ele.get_property("value"))
    print("滑块的当前x坐标：",current_slider_value * per_px + sliderX)
    time.sleep(2)
    """移动到的x坐标"""
    offsetX = sliderValue * per_px + sliderX
    print((offsetX, sliderY))
    # pyautogui.mouseUp()
    act.w3c_actions.pointer_action.move_to_location(current_slider_value * per_px + sliderX, sliderY).click_and_hold()
    act.w3c_actions.pointer_action.move_to_location(offsetX, sliderY).release()
    act.w3c_actions.perform()
    print("点击后滑块的值为:", slider_ele.get_property("value"))

set_slider_value(10)

html文件

html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="jquery-1.8.3.js" type="text/javascript">script>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }


      .slider-panel {
        background-color: #fcc688;
        height: 450px;
        width: 600px;
        padding: 20px;
        margin: auto;
      }


      .slider-panel .slider-box {
        background-color: darkgray;
        margin-top: 40px;
        display: inline-block;
        width: 400px;
        height: 6px;
        position: relative;
        border-radius: 5px;
      }


      /* 滑条划过的宽度，默认值为0 */
      .slider-panel .slider-box .slider-value {
        background-image: linear-gradient(90deg, #82E0F7 0%, #009DDC 52%);
        height: 6px;
        width: 0;
        border-radius: 5px;
      }


      /* 滑条的样式。默认透明 */
      .slider-panel input {
        position: absolute;
        left: 0;
        top: 0;
        -webkit-appearance: none;
        -ms-appearance: none;
        background: transparent;
        width: 200px;
        height: 2px;
        outline: none;
      }


      /* 圆形滑块的样式 */
      .slider-panel input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 12px;
        width: 12px;
        background-color: #eaecee;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 4px 0 #212B35;
        background: #4BBEEC;
        border: 2px solid #FFFFFF;
      }
style>
    <script type="text/javascript">
      $(function() {
        //绑定鼠标滑动事件
        $(' .slider-panel input').on('mousemove touchmove touchend click', moveSlider)


        function moveSlider() {
          // 获取当前滑条的动态值
          let sliderValue = parseInt($(this).val());
          // 将滑条的值赋值给滑条划过后p标签的宽度
          $('.slider-value').css('width', sliderValue + '%');
          // 显示当前滑条的动态值
          $('.slider-percentage').text(sliderValue);
        }


      })
script>
    <title>彩色渐变滑动条title>
  head>
  <body>
    <div class="slider-panel">
      
      <div class="slider-box">
        
        <p class="slider-value">p>
        
        <input type="range" min="0" step="1" max="100" value="40">
      div>
      <p><span class='slider-percentage'>0span>%p>
    div>
    div>
  body>
html>