Tengo una consulta como puedo hacer para que en vez que se muestren y oculten los input tipo number se muestren y oculten los slider de Jquery UI.
Osea Reemplazar inputs por Sliders
dejo código ...
$( 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>