Highlighted

Range Slider

Explorer ,
Dec 07, 2017

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.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

Views

393

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Range Slider

Explorer ,
Dec 07, 2017

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.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

Views

394

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 07, 2017 0
Adobe Community Professional ,
Dec 07, 2017

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 07, 2017 0
Adobe Community Professional ,
Dec 07, 2017

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 07, 2017 0
Adobe Community Professional ,
Dec 07, 2017

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>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 07, 2017 2
Adobe Community Professional ,
Dec 08, 2017

Copy link to clipboard

Copied

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

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2017 0
Explorer ,
Dec 08, 2017

Copy link to clipboard

Copied

Thank you all. Fantastic work.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2017 0