jQuery UI 滑块样式 - 停在最后答案

【问题标题】：jQuery UI Slider styling - stop at the endjQuery UI 滑块样式 - 停在最后
【发布时间】：2018-04-26 14:54:18
【问题描述】：

请帮助我如何在滑块边框的末端停止滑块句柄。

演示：

body{
    padding:50px
}
#slider{
    height:50px;
    border-radius:50px;
    border-color:#1C2128;
}
#slider span {
    height: 50px;
    border-radius: 50px;
    top: 0;
    width: 80px;
    margin-left: 0;
    border:0;
    background:#69B253;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function() {
        $( "#slider" ).slider();
    });
    </script>
</head>
<body>
 
<div id="slider"></div>
 
</body>
</html>

我尝试了很多解决方案，但都不起作用。

如何直接向该滑块添加样式以在右边框停止句柄？我需要通用功能。请帮帮我。

【问题讨论】：

标签： jquery slider jqueryi-ui-buttonset

【解决方案1】：

也许这不是完美的解决方案

我使用change 事件来检测滑块的值

body{padding:50px}
#slider{height:50px;border-radius:50px;border-color:#1C2128;}
#slider span {
height: 50px;
border-radius: 50px;
top: 0;
width: 80px;
margin-left: 0;
border:0;
background:#69B253;
}

#slider {
  overflow: hidden;
}

#slider.finished span {
  margin-left: -80px;
}

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider" ).slider({
      change: function(event, ui) {
        console.log(ui.value);
        if (ui.value >= 80) {
          $( "#slider" ).addClass('finished')
        } else {
          $("#slider").removeClass('finished')
        }
      }
    });
    
  } );
  </script>
</head>
<body>
 
<div id="slider"></div>
 
 
</body>
</html>

【讨论】：

哦不 :( 绿条必须停在滑块的末尾。
@Rafal：是的，我知道，我已经提到这不是一个完美的解决方案