5 Replies Latest reply on Dec 8, 2017 11:03 AM by iangoulbourne

    Range Slider

    iangoulbourne Level 1

      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.

        • 1. Re: Range Slider
          BenPleysier Adobe Community Professional & MVP

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

          • 2. Re: Range Slider
            Nancy OShea Adobe Community Professional & MVP

            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

            • 3. Re: Range Slider
              BenPleysier Adobe Community Professional & MVP

              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>
              
              1 person found this helpful
              • 4. Re: Range Slider
                Nancy OShea Adobe Community Professional & MVP

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

                 

                 

                 

                Nancy

                • 5. Re: Range Slider
                  iangoulbourne Level 1

                  Thank you all. Fantastic work.