slid

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
     
<style>
       /* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    border-radius: 5px;
    border-color: black;
    border-width:.2px !important;
    background: #b03f57; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    transition: opacity .02s;
}
/* Mouse-over effects */
.slider:hover {
    opacity: 0.85; /* Fully shown on mouse-over */
}
a.ui-slider-handle
  { 
    width:10px !important;
    height:20px !important;
    background:crimson !important;
    border-color:black !important;
    cursor: pointer !important;
  }
  
a.ui-slider-handle:hover
  {
    background:crimson !important;
    border-color:brown !important;
  } 
a.ui-slider-handle:focus
  {
    background:crimson !important;
    border-color:blue !important;
    outline:none !important;
  }     
</style>  
 <script type="text/javascript">
         $(window).load(function() {
         })
        </script>     
 
      <script>
        
         $(function() {
            $("#slider-2").slider({
               value: 60,
               max:100,
               animate:"fast",
               orientation: "horizontal",
               change: function( event, ui ) {
                  console.log(ui.value);
//                  console.log($("#sliderl"));
                 $( "#minval" ).val( ui.value );
//                  $("#sliderl")["0"].innerText= "Slider Test:" + ui.value;
               },
               slide: function( event, ui ) {                
                     $( "#minval" ).val( ui.value );
               }
            });
           $( "#minval" ).val( $( "#slider-2" ).slider( "value" ) );
         });
        var c=0;
        function buttonpress(){
             console.log($("#sliderp")["0"].style.display);
          if(c%2 ==0) {
            $("#slider-2")["0"].style.display ="inline-block";
            $("#sliderp")["0"].style.display="inline-block";}
          else {
            $("#slider-2")["0"].style.display ="none";
            $("#sliderp")["0"].style.display="none";}
          c++;
           }
      </script>
   </head>
   
   <body>
       
     <div class= "top" id = "top2" style="width:500px;height:500px; border-color:black; border-width:2px !important; border-style: solid;text-align:center;">
       <button type="button" class="btn btn-danger" id='b' onclick="buttonpress()" style= "height :34px;border-color: #d43f3a;  border-width: 3px; outline-color: transparent;" >Overview </button> 

        <p id="sliderp" style="display: none;">
         <label for = "minval" style="display: inline-block; font-size:14px; margin-top: 0px; font-weight: 700; padding: 0px 0px;">Minumum value:</label>
         <input type = "text" id = "minval" 
            style = "border:0; font-size:14px;color:#b9cd6d; font-weight:bold;">
        </p>
          <div class= "slider" id = "slider-2" style="width:200px; border-color:black; border-width:2px; margin-top:10px; display:none;"></div>

     </div>
   </body>
</html>