Skip to content

Instantly share code, notes, and snippets.

@Worm4047
Last active June 1, 2018 12:02
Show Gist options
  • Select an option

  • Save Worm4047/ceb2e299255b17bf447ab7af9e5fb013 to your computer and use it in GitHub Desktop.

Select an option

Save Worm4047/ceb2e299255b17bf447ab7af9e5fb013 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Synchronized Slider</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
</head>
<body>
<div class="container text-center">
<h1 >Slider Demo</h1>
<form class="mt-5">
<div class="form-group">
<label for="formControlRange">Demo Slider 1</label>
<input type="range" class="form-control-range sync" id="slider1" min="0" max="50" value="{{slider1}}">
</div>
<div class="form-group">
<label for="formControlRange">Demo Slider 2</label>
<input type="range" class="form-control-range sync" id="slider2" min="0" max="50" value="{{slider2}}">
</div>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment