hi have jquery slider 1 handle. want divide slider 3 equal parts each part has own color. don't think jquery slider has functionality , if not hoping can point me javascript based 1 does.
like this
thanks!
here go. using bootstrap + jquery ui slider. let me know if u want achieve. keep coding.
$(function() { $("#slider").slider(); });.container { padding: 2vw; } #slider { border: 1px solid white; } .bg1, .bg2, .bg3 { height: 100%; } .bg1 { background-color: salmon; } .bg2 { background-color: green; } .bg3 { background-color: #6dd5ff; }<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <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> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div id="slider"> <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1 bg1"></div> <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1 bg2"></div> <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1 bg3"></div> </div> </div> </div> </div> </body> </html>
Comments
Post a Comment