I have a problem with a script

1

Good code:

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Documento sem título</title>
    <!-- PLUGINS -->

        <link href="/plugins/animate/animate.min.css" rel="stylesheet">

        <link href="/plugins/owl-carousel/owl.carousel.css" rel="stylesheet">



        <!-- THEME CSS -->

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

        <link href="/css/custom.css" rel="stylesheet">
</head>
	
	
	
	
        <section class="bg-grey-50 border-bottom-1 border-grey-200 relative">



            </br>

            <div class="container">

                <div class="col-md-12 col-xs-12 text-center">

                    </br>

                    <form class="form-horizontal" method="post" action="http://eloprime.com/vitorias" name="vitoriast_add">

                        <div class="form-group col-md-6">

                            <h3>1. Selecione sua Liga atual</h3>

                            <div class="col-md-12">

                                <img src="img/rank/bronze.png" id="imgAtual" class="img-responsive center-block" width="192" height="192">

                                <p class="text-center" id="lblAtual">BRONZE</p>

                            </div>

                            <strong class="col-md-12">Liga</strong>

                            <div class="col-md-12">

                                <select class="form-control" id="eloAtual" name="ligaAtual">

                                    <option value="Bronze">Bronze</option>

                                    <option value="Prata">Prata</option>

                                    <option value="Ouro">Ouro</option>

                                    <option value="Platina">Platina</option>

                                    <option value="Diamante">Diamante</option>

                                </select>

                            </div>

                            </br>



                        </div>

                        <div class="form-group col-md-6" style="padding-bottom:-5px;">

                            <h3>2. Selecione a Fila desejada</h3><br><br>

                            <div class="col-md-12">

                                <img src="img/rank/solo.png" id="imgFila" class="img-responsive center-block ">

                                <p class="text-center" id="lblFila">Solo/Duo</p>

                            </div>

                            <strong class="col-md-12">Fila</strong>

                            <div class="col-md-12 ">

                                <select class="form-control" id="filaDesejada" name="ligaDesejado">

                                    <option value="Solo/Duo">Solo/Duo</option>

                                    <option value="Flex 5x5">Flex 5x5</option>

                                    <!--<option value="flex3">Flex 3x3</option>-->

                                </select>

                            </div>

                            </br>



                        </div>



                        <div class="col-md-8 col-md-offset-2">

                            <h3>3. Selecione a quantidade de vitórias desejadas.</h3>

                            <div id="slider"></div>

                            <p class="text-center" id="vitorias"><strong>2 partidas selecionadas</strong></p>

                            <input type="hidden" name="qtd" value="" id="qtd">



                        </div>

                        <div class="col-md-4 col-md-offset-4">

                            <div class="form-group">

                              <label class="control-label">Valor do Serviço</label>

                              <div class="input-group">

                                <span class="input-group-addon">R$</span>

                                  <input type="hidden" class="form-control" placeholder="0,00" id="total" value="" name="valor_total">

                                  <input type="text" class="form-control" placeholder="0,00" id="total1" value="" disabled>

                                  <span class="input-group-btn">

                                  <button class="btn btn-primary" type="submit">Contratar</button>

                                </span>

                              </div>

                            </div>

                        </div>



                    </form>


                </div>



            </div>



        </section>
  <!-- Javascript -->

        <script src="/plugins/jquery/jquery-3.1.0.min.js "></script>

        <script src="/plugins/bootstrap/js/bootstrap.min.js "></script>

        <script src="/js/core.min.js "></script>

        <script src="/plugins/owl-carousel/owl.carousel.min.js "></script>



        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>$(document).ready(function(){varlblAtual=$("#lblAtual"),

                    eloAtual = $("#eloAtual"),

                    imgAtual = $("#imgAtual"),

                    divAtual = $("#divAtual"),

                    rankFolder = "img/rank/",

                    lblFila = $("#lblFila"),

                    imgFila = $("#imgFila")



                $(eloAtual).on("change", function () {

                    $(imgAtual).attr("src", rankFolder + eloAtual.val().toLowerCase() + ".png")

                    $(lblAtual).html(eloAtual.val())

                    pegarValor(eloAtual.val(),  divAtual.val(),$("#qtd").val())

                    return false;

                })

                $(divAtual).on("change", function () {

                    $(imgAtual).attr("src", rankFolder + eloAtual.val().toLowerCase() + ".png")

                    $(lblAtual).html(eloAtual.val())

                    pegarValor(eloAtual.val(),  divAtual.val(),$("#qtd").val())

                    return false;

                })





                $(filaDesejada).on("change", function () {

                    var valor = $(filaDesejada).val(),

                        lbl = "",
                        img = ""

                    if (valor === "Flex 5x5"){
                        lbl = "Flex 5x5"
                        img = "flex5"
                    }

                        

                    if (valor === "Solo/Duo"){
                          lbl = "Solo/Duo"
                          img="solo"
                    }

                      



                    $(lblFila).html(lbl)

                    $(imgFila).attr('src', rankFolder + img + ".png")



                })
                $( "#slider" ).slider({
                    values : [2],
                    slide: function( event, ui ) {
                        $("#vitorias").html("<strong>"+ui.value+ " partidas selecionadas </strong>")
                        $("#qtd").val(ui.value)
                        console.log(event)
                        pegarValor(eloAtual.val(),  divAtual.val(),$("#qtd").val())
                    },
                    min:2,
                    max:15
                });
            })
            function pegarValor(tier, div,val) {
                $.post("valor.php", {
                    t_atual: tier,
                    l_atual: div,
                    qtd: val,
                    tipo: "vitoria"
                }, function (data) {
                    $("#total").val(data)
                    $("#total1").val(data)
                    console.log(data)
                })
            }
        </script>
<body>
</body>
</html>

The quantity selection bar is not appearing as in img:

Itwasforthis:

thepartofthecodewheretheproblemis:

<divclass="col-md-8 col-md-offset-2">

                            <h3>3. Selecione a quantidade de vitórias desejadas.</h3>

                            <div id="slider"></div>

                            <p class="text-center" id="vitorias"><strong>2 partidas selecionadas</strong></p>

                            <input type="hidden" name="qtd" value="" id="qtd">



                        </div>
    
asked by anonymous 07.01.2018 / 11:52

1 answer

2

The jQuery UI library failed to load. The jQuery UI works with both files, a .js and a .css :

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><linkrel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

jQuery UI Slider documentation

Unlike the other answer, this input must be hidden same:

<input type="hidden" name="qtd" value="" id="qtd">

It is just a hidden field that will take the value of #slider controlled by jQuery UI and then be sent by form . The bar is built on top of this div :

<div id="slider"></div>
    
07.01.2018 / 12:40