Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 14
Tutorial para Criar Sliders

Nesse tutorial vamos mostrar como selecionar uma cor RGB utilizando três sliders:
Nesse caso cada slider vai gerar 255 tonalidades de uma cor RGB (Red, Green e Blue). A combinação das três cores gerará milhões de coress.
Exemplo 1:
Nesse exemplo vamos utilizar três sliders para criar as cores RGB:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Slider - Colorpicker</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 120px; height: 100px; margin-top: 18px; margin-left: 350px; background-image: none; } #red .ui-slider-range { background: #ef2929; } #red .ui-slider-handle { border-color: #ef2929; } #green .ui-slider-range { background: #8ae234; } #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } function refreshSwatch() { var red = $( "#red" ).slider( "value" ), green = $( "#green" ).slider( "value" ), blue = $( "#blue" ).slider( "value" ), hex = hexFromRGB( red, green, blue ); $( "#swatch" ).css( "background-color", "#" + hex ); } $( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); $( "#red" ).slider( "value", 255 ); $( "#green" ).slider( "value", 140 ); $( "#blue" ).slider( "value", 60 ); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body class="ui-widget-content" style="border:0;"> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> Colorpicker Simples </p> <div id="red"></div> <div id="green"></div> <div id="blue"></div> <div id="swatch" class="ui-widget-content ui-corner-all"></div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 2:
Nesse exemplo vamos criar um slider com uma escala numérica de 0 a 100 com incrementos de 1 unidade.
O controle deslizante básico é horizontal e possui uma única alça que pode ser movida com o mouse ou usando as teclas de seta.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Slider - Escala Numérica de 0 a 100</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #custom-handle { width: 3em; height: 1.6em; top: 50%; margin-top: -.8em; text-align: center; line-height: 1.6em; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { var handle = $( "#custom-handle" ); $( "#slider" ).slider({ create: function() { handle.text( $( this ).slider( "value" ) ); }, slide: function( event, ui ) { handle.text( ui.value ); } }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div id="slider"> <div id="custom-handle" class="ui-slider-handle"></div> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 3:
Nesse exemplo vamos mostrar como criar uma espécie de controle de som. utilizando um slider horizontal para controlar o volume geral e alguns verticais para o equalizador. Você poderá utilizar esse exemplo para outros propósitos também.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Slider - Múltiplos sliders</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="../../external/jquery/jquery.js"></script> <script src="../../ui/core.js"></script> <script src="../../ui/widget.js"></script> <script src="../../ui/mouse.js"></script> <script src="../../ui/slider.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #eq > span { height:120px; float:left; margin:15px } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { // setup master volume $( "#master" ).slider({ value: 60, orientation: "horizontal", range: "min", animate: true }); // setup graphic EQ $( "#eq > span" ).each(function() { // read initial values from markup and remove that var value = parseInt( $( this ).text(), 10 ); $( this ).empty().slider({ value: value, range: "min", animate: true, orientation: "vertical" }); }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> Volume Mestre </p> <div id="master" style="width:260px; margin:15px;"></div> <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> Equalizador </p> <div id="eq"> <span>88</span> <span>77</span> <span>55</span> <span>33</span> <span>40</span> <span>45</span> <span>70</span> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 4:
Nesse exemplo vamos mostrar como criar um slider com duas alças de controle. Também vamos criar uma escala de valores em reais. Esse tipo de slider pode ser usado para estaelecer faixas de diárias de hotéis, preços de casas para vender ou alugar, entre outras aplicações.
Defina a opção de intervalo como true para capturar um intervalo de valores com duas alças de arrastar. O espaço entre as alças é preenchido com uma cor de fundo diferente para indicar que esses valores estão selecionados..
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Slider - Slider com faixa de valores</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#slider-range" ).slider({ range: true, min: 100, max: 2000, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "R$ " + ui.values[ 0 ] + " - R$ " + ui.values[ 1 ] ); } }); $( "#amount" ).val( "R$ " + $( "#slider-range" ).slider( "values", 0 ) + " - R$ " + $( "#slider-range" ).slider( "values", 1 ) ); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p> <label for="amount">Faixa de Preços:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 5:
Nesse exemplo vamos mostrar como criar um slider juntamente com um combo box de valores. Tanto você poderá escolher o valor pelo slider ou pelo combo box.
Como vincular um controle deslizante a um elemento de seleção existente. A seleção permanece visível para exibir a alteração. Quando a seleção é alterada, o controle deslizante também é atualizado.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Slider - Slider com Combo Box</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { var select = $( "#minbeds" ); var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({ min: 1, max: 6, range: "min", value: select[ 0 ].selectedIndex + 1, slide: function( event, ui ) { select[ 0 ].selectedIndex = ui.value - 1; } }); $( "#minbeds" ).on( "change", function() { slider.slider( "value", this.selectedIndex + 1 ); }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <form id="reservation"> <label for="minbeds">Número Mínimo de Leitos</label> <select name="minbeds" id="minbeds"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> </form> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Criar Menus
Tutorial para Criar Conteúdos com Guias >>