Question

我一直在努力在同一条线上获得多个垂直UI滑块。我想要的是如下： 1.同一行上的多个垂直UI滑块。假设我想要一个接一个地连续放置4个垂直滑块。 2.我想在用户移动每个滑块时显示数字

我一直关注的代码为我提供了每个滑块上的数字。但是，目前滑块是一个在另一个下面（在同一列中）...我怎样才能将它们变成行格式

我试图通过小提琴分享我的代码，但遇到了困难。

如果有人可以帮我解决这个问题，我将非常感激。

我的HTML + JS代码：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-4" ).slider({
               orientation:"vertical" 
            });
            $( "#slider-4" ).slider({
               orientation:"vertical",
               value:50,
               slide: function( event, ui ) {
                  $( "#minval4" ).val( ui.value );
               }  
            });
            $( "#minval4" ).val( $( "#slider-4" ).slider( "value" ) );
            $( "#slider-5" ).slider({
               orientation:"vertical",
               value:50,
               slide: function( event, ui ) {
                  $( "#minval5" ).val( ui.value );
               }  
            });
            $( "#minval5" ).val( $( "#slider-5" ).slider( "value" ) );
         });
      </script>
      <!-- Pasted your code here -->
      <style>
        [id^="slider-"] + p {
            float: left;
            margin-right: 1em;
          }
      </style>
   </head>
   <body>
      <!-- HTML --> 
         <div class="container">
         <div id="slider-4"></div>
         <p>
            <label for="minval4">Minumum value4:</label>
            <input type="text" id="minval4" 
               style="border:0; color:#b9cd6d; font-weight:bold;">
         </p>
         <div id="slider-5"></div>
         <p>
            <label for="minval5">Minumum value5:</label>
            <input type="text" id="minval5" 
               style="border:0; color:#b9cd6d; font-weight:bold;">
         </p>
       </div>
   </body>
</html>

Answer 1

首先，我将每个滑块和<p>移动到它自己的部分：

  <div class="container">
     <section class="slider">
        <div id="slider-4"></div>
        <p>
           <label for="minval4">Minumum value4:</label>
           <input type="text" id="minval4" 
              style="border:0; color:#b9cd6d; font-weight:bold;">
        </p>            
     </section>
     <section class="slider">
        <div id="slider-5"></div>
        <p>
           <label for="minval5">Minumum value5:</label>
           <input type="text" id="minval5" 
              style="border:0; color:#b9cd6d; font-weight:bold;">
        </p>            
     </section>
   </div>

然后，我在</head>：

结束前添加了这个

  <style>
    section.slider {
     float: left;
    }
  </style>

代码：https://gist.github.com/antibland/6c43a6f20d5fce3a3bc8ad7324731516

jQuery UI：要在同一行上对齐的多个垂直滑块

1 个答案: