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"



      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.




        • 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>





            • 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">
              <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">
              body {
                width: 600px;
                margin: auto;
              [data-step] {
                display: none;
              <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> 
              min: 0,
              max: 5,
              value: 0,
              step: 1,
              orientation: "horizontal",
              slide: function( event, ui ) {
              // Convert value to index
              $("span[data-step='" + ui.value + "']").show();
              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.





                • 5. Re: Range Slider
                  iangoulbourne Level 1

                  Thank you all. Fantastic work.