Javascript Range Slider responsive no JS

Lucas R. · 23 de julho de 2020

Boa noite,

Fiz uma preview de Border radius, ao qual a mesma altera a border conforme se mexe na range. Agora estou tentando fazer com que os valores em que se deixa a(s) borda(s) fique exposto em um quadrado a parte, mas não consegui. Deixei abaixo apenas a parte que deu certo até agora:

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    
    <h3>Manipulando Bordas</h3>
        Todas as bordas
        <input type="range" min="0" max="50" value="0"
         oninput="modificarBorda(this.value)">

         Esquerdo superior
         <input type="range" min="0" max="50" value="0"
         oninput="modTopEsq(this.value)">

         Direito Superior
         <input type="range" min="0" max="50" value="0"
         oninput="modTopDir(this.value)">

        Direita inferior
         <input type="range" min="0" max="50" value="0"
         oninput="modBotDir(this.value)">

         Esquerda inferior
         <input type="range" min="0" max="50" value="0" 
         oninput="modBotEsq(this.value)"
         >
    <hr>

    <div style="border: solid 1px; width: 100px; 
    height: 100px;" id='quad'></div>

    <hr>
    <div>
       <input type="text"  name="receberValores">
    </div>

<script src="mani_estilo.js"></script>
</body>
</html>

Javascript

var allBorder = ""
var topEsq = ""
var topDir = ""
var botDir = ""
var botEsq = ""


function modificarBorda(all) {
    allBorder = Number(all) 

    quadrado()
}

function modTopEsq(lte /* lateral esquerdo*/ ) {
    topEsq = Number(lte)

    quadrado()
}

function modTopDir(ltd /* lateral direito*/) {
    topDir = Number(ltd)

    quadrado()
}

function modBotDir(ltdb /* lateral Direita baixo*/) {
    botDir = Number(ltdb)

    quadrado()
}

function modBotEsq(lteb /* lateral Esquerdo baixo*/) {
    botEsq = Number(lteb)

    quadrado()
}

function quadrado() {
    var quad = document.getElementById("quad").style

    quad.borderRadius = (allBorder) + "px"
    quad.borderTopLeftRadius = (topEsq) + "px"
    quad.borderTopRightRadius = (topDir) + "px"
    quad.borderBottomRightRadius = (botDir) + "px"
    quad.borderBottomLeftRadius = (botEsq) + "px"
}

JonathanCruz · 28 de julho de 2020

Na funçao modificarBorda você precisa passar pras variável "topDir, topEsq, botEsq, botDir" o valor do range "todasBordas", então quando a função quadrado é chamada ele aplica o mesmo valor para todas as bordas.

E pra exibir no input basta concatenar as 4 variaveis e passar pro value do input.

Ha e no topo do javascript inicia as variáveis com o número zero sem aspas.