我想用双范围滑块替换单个范围滑块

时间：2018-04-16 18:32:58

标签： jquery html slider

我找到了https://api.jquerymobile.com/rangeslider/#entry-examples

的双范围滑块代码

double slider 

<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>rangeslider demo</title>
      <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
    </head>
    <body>

    <div data-role="page" id="page1">
      <div data-role="header">
        <h1>jQuery Mobile Example</h1>
      </div>
      <div data-role="rangeslider">
        <label for="range-1a">Rangeslider:</label>
        <input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" data-show-value="true">
        <label for="range-1b">Rangeslider:</label>
        <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" data-show-value="true">
      </div>
    </div>

    </body>
    </html>

enter image description here

我想用那个替换我以前的单个滑块。

我之前的代码 navbar.html 。您可以通过搜索slidecontainer找到代码的滑块部分。 

<html lang="en">
  <head>
    <title>Matir Dokan</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
/* Remove the navbar's default rounded borders and increase the bottom margin */ 
.navbar {
  margin-bottom: 50px;
  border-radius: 0;
}

     /* Remove the jumbotron's default bottom margin */ 
     .jumbotron {
       margin-bottom: 0;
     }

     /* Add a gray background color and some padding to the footer */
     footer {
       background-color: #f2f2f2;
       padding: 25px;
     }
     .modal-backdrop
     {
       background: none;
     }
    </style>
  </head>

  <body>

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Matir Dokan</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Object Type <span class="caret"></span></a>
          <ul class="dropdown-menu">
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Toy</a></li>
        <li><a href="#">Furniture</a></li>
        <li><a href="#">Gift</a></li>
        <li><a href="#">Household</a></li>
        <li><a href="#">Instrument</a></li>
          </ul>
        </li>
<!--li>
<form>
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="selectpicker" id="sel1" style="background:black;border:0px">
      <option>select</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
    </div>
  </form>
  </li-->
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Meterial Type <span class="caret"></span></a>
          <ul class="dropdown-menu">
        <li><a href="#">Wood</a></li>
        <li><a href="#">Mud</a></li>
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Jute</a></li>
        <li><a href="#">Cotton</a></li>
        <li><a href="#">Cane</a></li>
        <li><a href="#">Bamboo</a></li>
          </ul>
        </li>
        <li>
          <form class="nav navbar-form navbar-left" action="search.php" method="post">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="imageName">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit">
              <i class="glyphicon glyphicon-search"></i>
            </button>
          </div>
        </div>
          </form>
        </li>
        <li>
          <div class="slidecontainer" height=50px>
        <input type="range" min="1" max="100" value="50">
          </div>
        </li>
        <li><a href="#">Auction</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <!--li><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#cart"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button></li-->
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Cart<span class="glyphicon glyphicon-shopping-cart"></span></a>


    <ul class="dropdown-menu">
      <li>
      <div class="row">

                <img src="http://lorempixel.com/50/50/" alt="" />


              <span class="item-right">
               <button class="btn btn-xs btn-danger pull-right">x</button>
              </span>
     </div>
         </li>

      <li>
      <div class="row">
        <span class="item">

                <img src="http://lorempixel.com/50/50/" alt="" />
                <span class="item-info">
                  <span>Item name</span>
                  <span>23$</span>
                </span>


              <span class="item-right">
               <button class="btn btn-xs btn-danger pull-right">x</button>
              </span>
            </span>
     </div>
         </li>

      <li>
      <div class="row">
        <span class="item">
              <span class="item-left">
                <img src="http://lorempixel.com/50/50/" alt="" />
                <span class="item-info">
                  <span>Item name</span>
                  <span>23$</span>
                </span>
              </span>

              <span class="item-right">
               <button class="btn btn-xs btn-danger pull-right">x</button>
              </span>
            </span>
     </div>
         </li>



       </ul>
       </li>
       <!--a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#cart" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-shopping-cart"></span>Cart<span class="caret"></span></a--!>
     <li><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
     <li><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>        
     </ul>
     </div>
     </div>
     </nav>




     <!-- Modal content-->


     <div class="modal fade" id="signUp" role="dialog" >
       <div class="modal-dialog">

         <!-- Modal content-->
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">&times;</button>
           <h4 class="modal-title">Sign Up</h4>
         </div>
         <div class="modal-body">
           <form action="signup.php" method="post">
         <div class="form-group">
           <label for="email">Email address:</label>
           <input type="email" class="form-control" id="email" name="email">
         </div>
         <div class="form-group">
           <label for="pwd">Password:</label>
           <input type="password" class="form-control" id="pwd" name="password">
         </div>
         <div class="form-group">
           <label for="pwd">Confirm Password:</label>
           <input type="password" class="form-control" id="pwd" name="password">
         </div>

         <button type="submit" class="btn btn-primary">Sign Up</button>
           </form> 
         </div>

       </div>

       </div>
     </div>


     <div class="modal fade" id="signIn" role="dialog">
       <div class="modal-dialog">

         <!-- Modal content-->
         <div class="modal-content">
           <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">Sign In</h4>
           </div>
           <div class="modal-body">
         <form action="signin.php" method="post">
           <div class="form-group">
             <label for="email">Email address:</label>
             <input type="email" class="form-control" id="email" name="email">
           </div>
           <div class="form-group">
             <label for="pwd">Password:</label>
             <input type="password" class="form-control" id="pwd" name="password">
           </div>
           <div class="checkbox">
             <label><input type="checkbox"> Remember me</label>
           </div>
           <button type="submit" class="btn btn-primary">Sign In</button>
         </form> 
           </div>

         </div>

       </div>
     </div>

我的新合并 updatedNavbar.html 

<html lang="en">
  <head>
    <title>Matir Dokan</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
    <style>
/* Remove the navbar's default rounded borders and increase the bottom margin */ 
.navbar {
  margin-bottom: 50px;
  border-radius: 0;
}

     /* Remove the jumbotron's default bottom margin */ 
     .jumbotron {
       margin-bottom: 0;
     }

     /* Add a gray background color and some padding to the footer */
     footer {
       background-color: #f2f2f2;
       padding: 25px;
     }
     .modal-backdrop
     {
       background: none;
     }
    </style>
  </head>

  <body>

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Matir Dokan</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Object Type <span class="caret"></span></a>
          <ul class="dropdown-menu">
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Toy</a></li>
        <li><a href="#">Furniture</a></li>
        <li><a href="#">Gift</a></li>
        <li><a href="#">Household</a></li>
        <li><a href="#">Instrument</a></li>
          </ul>
        </li>
<!--li>
<form>
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="selectpicker" id="sel1" style="background:black;border:0px">
      <option>select</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
    </div>
  </form>
  </li-->
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Meterial Type <span class="caret"></span></a>
          <ul class="dropdown-menu">
        <li><a href="#">Wood</a></li>
        <li><a href="#">Mud</a></li>
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Jute</a></li>
        <li><a href="#">Cotton</a></li>
        <li><a href="#">Cane</a></li>
        <li><a href="#">Bamboo</a></li>
          </ul>
        </li>
        <li>
          <form class="nav navbar-form navbar-left" action="search.php" method="post">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="imageName">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit">
              <i class="glyphicon glyphicon-search"></i>
            </button>
          </div>
        </div>
          </form>
        </li>
        <li>
          <div data-role="rangeslider">
        <label for="range-1a">Rangeslider:</label>
        <input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" data-show-value="true">
        <label for="range-1b">Rangeslider:</label>
        <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" data-show-value="true">
      </div>
        </li>
        <li><a href="#">Auction</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <!--li><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#cart"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button></li-->
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Cart<span class="glyphicon glyphicon-shopping-cart"></span></a>


    <ul class="dropdown-menu">
      <li>
      <div class="row">

                <img src="http://lorempixel.com/50/50/" alt="" />


              <span class="item-right">
               <button class="btn btn-xs btn-danger pull-right">x</button>
              </span>
     </div>
         </li>

      <li>
      <div class="row">
        <span class="item">

                <img src="http://lorempixel.com/50/50/" alt="" />
                <span class="item-info">
                  <span>Item name</span>
                  <span>23$</span>
                </span>


              <span class="item-right">
               <button class="btn btn-xs btn-danger pull-right">x</button>
              </span>
            </span>
     </div>
         </li>

      <li>
      <div class="row">
        <span class="item">
              <span class="item-left">
                <img src="http://lorempixel.com/50/50/" alt="" />
                <span class="item-info">
                  <span>Item name</span>
                  <span>23$</span>
                </span>
              </span>

              <span class="item-right">
               <button class="btn btn-xs btn-danger pull-right">x</button>
              </span>
            </span>
     </div>
         </li>



       </ul>
       </li>
       <!--a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#cart" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-shopping-cart"></span>Cart<span class="caret"></span></a--!>
     <li><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
     <li><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>        
     </ul>
     </div>
     </div>
     </nav>




     <!-- Modal content-->


     <div class="modal fade" id="signUp" role="dialog" >
       <div class="modal-dialog">

         <!-- Modal content-->
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">&times;</button>
           <h4 class="modal-title">Sign Up</h4>
         </div>
         <div class="modal-body">
           <form action="signup.php" method="post">
         <div class="form-group">
           <label for="email">Email address:</label>
           <input type="email" class="form-control" id="email" name="email">
         </div>
         <div class="form-group">
           <label for="pwd">Password:</label>
           <input type="password" class="form-control" id="pwd" name="password">
         </div>
         <div class="form-group">
           <label for="pwd">Confirm Password:</label>
           <input type="password" class="form-control" id="pwd" name="password">
         </div>

         <button type="submit" class="btn btn-primary">Sign Up</button>
           </form> 
         </div>

       </div>

       </div>
     </div>


     <div class="modal fade" id="signIn" role="dialog">
       <div class="modal-dialog">

         <!-- Modal content-->
         <div class="modal-content">
           <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">Sign In</h4>
           </div>
           <div class="modal-body">
         <form action="signin.php" method="post">
           <div class="form-group">
             <label for="email">Email address:</label>
             <input type="email" class="form-control" id="email" name="email">
           </div>
           <div class="form-group">
             <label for="pwd">Password:</label>
             <input type="password" class="form-control" id="pwd" name="password">
           </div>
           <div class="checkbox">
             <label><input type="checkbox"> Remember me</label>
           </div>
           <button type="submit" class="btn btn-primary">Sign In</button>
         </form> 
           </div>

         </div>

       </div>
     </div>

更新了导航栏的输出

enter image description here

现在，我想获得上述网站中显示的类似输出。应该更改范围滑块代码的哪一部分？

0 个答案:

没有答案
相关问题
最新问题