Get started with bootstrap-slider CDN

BSD licensed

Free, easy Bootstrap Slider creates input range slides.

Tags:
  • slider
  • bootstrap
  • twitter
  • slide

Stable version

Copied!

How to start using bootstrap-slider CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with bootstrap-slider CDN - cdnhub.io</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">Bootstrap Slider Example</h1>
        <input id="myRange" type="range" class="form-range" min="0" max="10" value="5" step="1" oninput="sliderValueChange(this)">
        <div id="output"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.cdnhub.io/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>
    <script>
        function sliderValueChange(slider) {
            document.getElementById('output').innerHTML = slider.value;
        }
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions