0
167
ViewsEl control deslizante JQuery cambia el color de fondo y los controladores redondos
Así que hice un control deslizante, pero ahora estoy tratando de diseñarlos para que se vean así.
¿Cómo puedo hacer que los controladores sean redondos?
¿Y cómo puedo hacer que los lados que están fuera de rango se atenúen y el interior sea verde? No puedo encontrar ningún ejemplo/documentación para mirar, así que ahora estoy preguntando aquí.
$(document).ready(function() { $("#slider").slider({ min: 1, max: 100, step: 1, values: [1, 100], slide: function(event, ui) { if ( ui.values[0] >= ui.values[1] ) { return false; } else { for (var i = 0; i < ui.values.length; ++i) { document.getElementById("spanMin").textContent= ui.values[1]; document.getElementById("spanMax").textContent= ui.values[0]; } } } }); $("input.sliderValue").change(function() { var $this = $(this); $("#slider").slider("values", $this.data("index"), $this.val()); }); }); body { font-family: Verdana, Arial, sans-serif; font-size: 12px; } .slidersStyle div, span { display: inline-block; } <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <form> <div class="slidersStyle"> <span id="spanMax" style="display: inline-block;" class="sliderValue">1</span> <div style="width:200px; margin-left: 15px; margin-right: 15px;" id="slider"> </div> <span id="spanMin" class="sliderValue">100</span> </div> </form>
·
Juan Pablo Isaza
1 answers
Answer question0
Aquí está tu solución. Básicamente, usé la versión más nueva de JQuery, la interfaz de usuario de JQuery más nueva. La versión CSS de JQuery UI es la misma que la tuya. Puede modificar y usar sus versiones anteriores, también debería funcionar.
$(document).ready(function() { $( "#slider-range" ).slider({ range: true, min: 1, max: 100, values: [ 1, 100 ], slide: function( event, ui ) { $( "#min" ).val( ui.values[ 0 ] ); $( "#max" ).val( ui.values[ 1 ] ); } }); }); body { font-family: Verdana, Arial, sans-serif; font-size: 12px; } #min { width:14px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border-radius: 50%!important; } .ui-slider .ui-slider-handle { width: 1.8em!important; height: 1.8em!important; } .ui-slider-horizontal .ui-slider-handle { top: -0.45em!important; } .ui-widget-content { background: #dddddd!important; } .ui-widget-header { background: #9ac836!important; } <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <form> <input type="text" id="min" value="1" readonly style="border:0; display:inline-block;"> <div id="slider-range" style="width:200px; margin:0px 25px; display: inline-block;" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"> <div class="ui-slider-range ui-corner-all ui-widget-header" style=""></div> <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span> <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span> </div> <input type="text" id="max" value="100" readonly style="border:0; display:inline-block;"> </form>
·
Juan Pablo Isaza
Report
Answer question