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 >>