<template>
    <div>
        <section class="container mx-auto px-4 xl:px-24">
            <h1 class="text-color-3 text-5xl text-center py-16 font-bold">Teacher's License </h1>
                <div class="flex flex-row justify-center">
                <h1 class="justify-center">Teacher Accounts: &nbsp;</h1>
                <input class="flex slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue">  &nbsp;
                    <span class="border border-black px-1 h-fit rounded-md" v-text="sliderValue"></span>
            </div>
            <div class="flex flex-row justify-center 2xl:gap-x-96 space-x-48 md:space-x-96 mt-8">
                <div class="flex">Student Accounts</div>
                <div class="flex">30</div>
            </div>
            <div class="flex flex-col lg:flex-row justify-center gap-4 xl:space-x-48 mt-10">
                <div class="form-group mb-1">
                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
                    <input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
                </div>
                <div class="form-group mb-1">
                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
                    <input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
                </div>
            </div>
            <div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
        </section>
    </div>
</template>
<script is:inline>
  export default {
    data() {
      return {
        sliderValue: 55,
      }
    },
  }
  </script>
  <style>
        .slider {
      -webkit-appearance: none;
      height: 6px;
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.3);
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
      width: 50%;
    }
    
    
    
    /* .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 2px;
      height: 2px;
      background: rgba(0, 102, 255, 1);
      border-radius: 50px;
      cursor: pointer;
    } */
    
    .slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: rgba(0, 102, 255, 1);
        border-radius: 50px;
        cursor: pointer;
    }
    .slider:hover::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: rgb(0, 102, 255, 1);
        border-radius: 50px;
        border-width: 6px;
        border-color: rgba(217, 214, 214, 1);
        cursor: pointer;
    }
</style>