<!--//  quick_start_template.html////  Created by Faye Li on 3 Feb 2017//  Copyright 2017 High Fidelity, Inc.////  Distributed under the Apache License, Version 2.0.//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html--><html>    <head>        <title>Slider Test</title>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">        <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> -->        <style>            body {                margin: 0;                width: 100%;                font-family: 'Raleway', sans-serif;                color: white;                background: linear-gradient(#2b2b2b, #0f212e);            }             .top-bar {                height: 90px;                background: linear-gradient(#2b2b2b, #1e1e1e);                font-weight: bold;                padding-left: 30px;                padding-right: 30px;                display: flex;                align-items: center;                position: fixed;                width: 480px;                top: 0;                z-index: 1;            }             .content {                margin-top: 90px;                padding: 30px;            }             input[type=button] {                font-family: 'Raleway';                font-weight: bold;                font-size: 13px;                text-transform: uppercase;                vertical-align: top;                height: 28px;                min-width: 120px;                padding: 0px 18px;                margin-right: 6px;                border-radius: 5px;                border: none;                color: #fff;                background-color: #000;                background: linear-gradient(#343434 20%, #000 100%);                cursor: pointer;            }             input[type=button].red {                color: #fff;                background-color: #94132e;                background: linear-gradient(#d42043 20%, #94132e 100%);            }            input[type=button].blue {                color: #fff;                background-color: #1080b8;                background: linear-gradient(#00b4ef 20%, #1080b8 100%);            }            input[type=button].white {                color: #121212;                background-color: #afafaf;                background: linear-gradient(#fff 20%, #afafaf 100%);            }             input[type=button]:enabled:hover {                background: linear-gradient(#000, #000);                border: none;            }            input[type=button].red:enabled:hover {                background: linear-gradient(#d42043, #d42043);                border: none;            }            input[type=button].blue:enabled:hover {                background: linear-gradient(#00b4ef, #00b4ef);                border: none;            }            input[type=button].white:enabled:hover {                background: linear-gradient(#fff, #fff);                border: none;            }             input[type=button]:active {                background: linear-gradient(#343434, #343434);            }            input[type=button].red:active {                background: linear-gradient(#94132e, #94132e);            }            input[type=button].blue:active {                background: linear-gradient(#1080b8, #1080b8);            }            input[type=button].white:active {                background: linear-gradient(#afafaf, #afafaf);            }             input[type=button]:disabled {                color: #252525;                background: linear-gradient(#575757 20%, #252525 100%);            }             input[type=button][pressed=pressed] {                color: #00b4ef;            }         </style>    </head>    <body>        <div class="top-bar">            <h4>Slider Test</h4>        </div>        <div class="content">            <p>Native Input Range Slider</p>            <p>                <input type="range" name="native-slider" id="native-slider" value="60" min="0" max="100">            </p>            <p>Bootstrap Slider</p>            <p>                <input              id="bootstrap-slider"              type="text"              data-provide="slider"              data-slider-min="0"              data-slider-max="100"              data-slider-step="1"              data-slider-value="60"              data-slider-tooltip="hide"                >            </p>        </div>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>        <script>            function main() {                console.log("ready");            }             $(document).ready(main);        </script>    </body></html>