• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Range Slider

Explorer ,
Dec 07, 2017 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.

Views

676

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
community guidelines

correct answers 1 Correct answer

Community Expert , Dec 07, 2017 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>

</hea

...

Votes

Translate

Translate
Community Expert ,
Dec 07, 2017 Dec 07, 2017

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Dec 07, 2017 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Dec 07, 2017 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>

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Dec 08, 2017 Dec 08, 2017

Copy link to clipboard

Copied

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

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Dec 08, 2017 Dec 08, 2017

Copy link to clipboard

Copied

LATEST

Thank you all. Fantastic work.

Votes

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
community guidelines