Copy link to clipboard
Copied
Hello All,
Please see this link and view the Range Slider that starts with "Early March"
https://www.adobeawards.com/us/competition
I would like to create something exactly like that. I'm using Dreamweaver with Bootstrap template. Is there tutorial somewhere that provides a sample like this or show how to create with the various slides when scrolling step by step?
You're help is appreciated.
Thanks,
Ian.
This is a quick mockup using jQuery. Copy and paste into a new document and view in browser.
...<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Slider</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<style>
body {
width: 600px;
margin: auto;
}
[data-step] {
display: none;
}
</style>
</hea
Copy link to clipboard
Copied
Here you will find examples of the Bootstrap slider Slider for Bootstrap Examples Page
Copy link to clipboard
Copied
How would you connect the data range slider to a Carousel?
Let's say, the OP wants to replace these Carousel Slide Indicators with the data range-slider.
<!-- Slide Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
Nancy
Copy link to clipboard
Copied
This is a quick mockup using jQuery. Copy and paste into a new document and view in browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Slider</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<style>
body {
width: 600px;
margin: auto;
}
[data-step] {
display: none;
}
</style>
</head>
<body>
<span data-step="0"> </span>
<span data-step="1">first-step-content</span>
<span data-step="2">second-step-content</span>
<span data-step="3">third-step-content</span>
<span data-step="4">fourth-step-conten</span>
<span data-step="5">fifth-step-content</span>
<div id="slider"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
$("#slider").slider({
min: 0,
max: 5,
value: 0,
step: 1,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
// Convert value to index
$("span[data-step]").hide();
$("span[data-step='" + ui.value + "']").show();
}
});
</script>
</body>
</html>
Copy link to clipboard
Copied
Ah ha! So you used a jQuery UI slider. Well that works.
Nancy
Copy link to clipboard
Copied
Thank you all. Fantastic work.