How to show / hide Jquery Sliders UI with buttons

Navigation
0

I have a query how I can do to show and hide the Jquery UI slider instead of showing and hiding the type number input.

Briefly replace inputs with Sliders

I leave code ... 

  $( function() {
    $( "#slider" ).slider();
    $( "#slider2" ).slider();
    $( "#slider3" ).slider();
    $( "#slider4" ).slider();
    $( "#slider5" ).slider();
    $( "#slider6" ).slider();
  } );


 var ctr = 0;
        var ctr_bdra = 0;
        var init = 0;
        var contenedor = $(".inputs");
        var edad = $(".edad_hidden");
        var edades;

        $(".agregar").click(function(e){            
            add_control(contenedor);
            $(".agregar, .nth").hide(); 
            e.preventDefault();

        });


        $(document).on('click', 'button.agregar_in', function(e){
            if($(".ed").val() == "")
            {
                return false;

            }else{
                add_control(contenedor);
                ctr_bdra = 1;
                if(ctr_bdra > 0){
                    $(this).hide();
                    
                    $(this).next().hide();
                }

            }
            e.preventDefault();

        });

        $(document).on('click', 'button.eliminar_in', function(e){ 
            array = $(".edad_hidden").val().split(',');
            array.pop();
            $(".edad_hidden").val(array);
            var node = $(this).parent();
            node.remove();
            if(!$(".btun").is(":visible")){
                $(".agregar, .nth").show();
            }           
            $('button.agregar_in').last().show();
            
            $('button.eliminar_in').last().show();
            e.preventDefault();
        });

        $(document).on('keyup','.ed', function() {
            var info = [];
            $('.ed').each(function(){ info.push($(this).val()); });
            $(".edad_hidden").val(info);
        });


        function add_control(contenedor){
            ctr = ctr + 1;
            contenedor.append('<div class="btun"><input type="number" min="0" class="ed" name="edades[]" value=""  id="tb' + ctr + '' +'"/>'+
                              '<button class="agregar_in">+</button>'+
                              '<button class="eliminar_in">-</button></div>');
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="slider" style="width:500px;background:red"></div>

    <form method="post">
      <p class="nth" style="display: inline-block;">Agregar</p>
      <button class="agregar">+</button>
      <div class="inputs"></div>
      <input type="hidden" value  class="edad_hidden"></input>   
     <!-- <input type="submit" value="enviar" /> -->
    </form>
    
asked by Richard 20.05.2018 в 20:52
source

1 answer

0

I edit with your comment, in that case, in contenedor.append add the slider and when you press the "+" button calls the method .slider() to create it. Take advantage of the variable ctr to assign them a id to each slider to be able to select them individually. 

   $( function() {
    $( "#slider" ).slider();
  } );


 var ctr = 0;
        var ctr_bdra = 0;
        var init = 0;
        var contenedor = $(".inputs");
        var edad = $(".edad_hidden");
        var edades;

        $(".agregar").click(function(e){            
            add_control(contenedor);
            $(".agregar, .nth").hide(); 
            e.preventDefault();

        });


        $(document).on('click', 'button.agregar_in', function(e){
            if($(".ed").val() == "")
            {
                return false;

            }else{
                add_control(contenedor);
                ctr_bdra = 1;
                if(ctr_bdra > 0){
                    $(this).hide();
                    
                    $(this).next().hide();
                }
								$( ".slid" ).slider();
            }
            e.preventDefault();

        });

        $(document).on('click', 'button.eliminar_in', function(e){ 

            array = $(".edad_hidden").val().split(',');
            array.pop();
            $(".edad_hidden").val(array);
            var node = $(this).parent();
            node.remove();
            if(!$(".slid").is(":visible")){
                $(".agregar, .nth").show();
            }           
            $('button.agregar_in').last().show();
            
            $('button.eliminar_in').last().show();
            e.preventDefault();
        });

        $(document).on('keyup','.ed', function() {
            var info = [];
            $('.ed').each(function(){ info.push($(this).val()); });
            $(".edad_hidden").val(info);
        });


        function add_control(contenedor){
            ctr = ctr + 1;
            console.log(ctr);
            contenedor.append('<div id="slider'+ctr+'" class="slid" style="width:500px;background:red">'+
                              '<button class="agregar_in">+</button>'+
                              '<button class="eliminar_in">-</button></div>');
        }
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="slider" style="width:500px;background:red"></div>

    <form method="post">
    <br/>
      <p class="nth" style="display: inline-block;">Agregar</p>
      <button class="agregar">+</button>
      <div class="inputs"></div>
      <input type="hidden" value  class="edad_hidden"></input>   
     <!-- <input type="submit" value="enviar" /> -->
    </form>
    
answered by 20.05.2018 в 21:47
Variable declared in subprocess is not passed to main Error: Position Fixed - Relative (HTML-CSS)