0

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

在此处输入图像描述

演示：

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>

我尝试了许多解决方案但不起作用。

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

4

1 回答 1

0

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

我使用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>

于 2018-04-23T13:35:07.583 回答