Range Slider

Report · Dec 07, 2017

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.

Report · Dec 07, 2017

Here you will find examples of the Bootstrap slider Slider for Bootstrap Examples Page

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Dec 07, 2017

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.

</ol>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 07, 2017

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>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Dec 08, 2017

Ah ha! So you used a jQuery UI slider. Well that works.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 08, 2017

Thank you all. Fantastic work.

Range Slider

1 Correct answer