jQuery UI Slider styling - stop at the end

Question

Please help me how can I stop slider handle stop at the end of slider border.

DEMO:

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>

I try many solutions but dont work.

How can I straight add styling to that slider to stop handle in right border? I need universal function to this. Please help me.

score 0 · Answer 1 · answered Apr 23 '18 at 13:35

Maybe this is not perfect solution

I used change event to detect the value from slider

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: Yeah I know, I already mentioned about this is not a perfect solution — Tan Duong, Apr 24 '18 at 02:55

jQuery UI Slider styling - stop at the end

1 Answers1