Skip to main content
I
iangoulbourne
Known Participant
December 7, 2017
Answered

Range Slider

  • December 7, 2017
  • 2 replies
  • 984 views

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 topic has been closed for replies.
    Correct answer BenPleysier

    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>

    2 replies

    I
    iangoulbourneAuthor
    Known Participant
    December 8, 2017

    Thank you all. Fantastic work.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 7, 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!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 7, 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.

    <!-- 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
    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    December 8, 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!
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices