Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $('.sliders').noUiSlider({
    start: 127,
    connect: "lower",
    orientation: "vertical",
    range: {
        'min': 0,
        'max': 255
    },
    format: wNumb({
        decimals: 0
    })
});
​
// Bind the color changing function
// to the slide event.
$('.sliders').on('slide', setColor);
    
    function setColor(){
​
    // Get the slider values,
    // stick them together.
    var color = 'rgb(' +
        $("#red").val() + ',' +
        $("#green").val() + ',' +
        $("#blue").val() + ')';
​
    // Fill the color box.
    $(".result").css({
        background: color,
        color: color
    });
}
  </script>
</head>
<body>
 
<div id="colorpicker">
    <div class="sliders" id="red"></div>
    <div class="sliders" id="green"></div>
    <div class="sliders" id="blue"></div>
​
    <div class="result"></div>
</div>
 
 
</body>
</html>
​
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers