Range slider demo with usign pure CSS and bootstrap 4. you can set range with selecting. when you stop selected cursor then display your selected range. Here different types of range slider like primary,success,info,warning and danger. bootstrap 4 range slider with labels

We allows to free snippets of bootstrap price range slider example , you can download full code of bootstrap range slider css layout. Here in this post i will give you example of size range slider jquery free download snippet and you will get simple code of html, css and jquery. In how to make slider in html and css snippet i give you three tab with html, css and js, you can easily get code of pure css range slider layout.


<!DOCTYPE html> <html> <head> <title>Range Sliders Design</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container"> <div class="row"> <div class="offset-md-3 col-lg-6"> <div class="row"> <div class="col-lg-12"> <div class="range"> <input type="range" name="range" min="1" max="100" value="50" onchange="range.value=value"> <output id="range">50</output> </div> </div> <div class="col-lg-12"> <div class="range range-primary"> <input type="range" name="range" min="1" max="100" value="50" onchange="rangePrimary.value=value"> <output id="rangePrimary">50</output> </div> </div> <div class="col-lg-12"> <div class="range range-success"> <input type="range" name="range" min="1" max="100" value="50" onchange="rangeSuccess.value=value"> <output id="rangeSuccess">50</output> </div> </div> <div class="col-lg-12"> <div class="range range-info"> <input type="range" name="range" min="1" max="100" value="50" onchange="rangeInfo.value=value"> <output id="rangeInfo">50</output> </div> </div> <div class="col-lg-12"> <div class="range range-warning"> <input type="range" name="range" min="1" max="100" value="50" onchange="rangeWarning.value=value"> <output id="rangeWarning">50</output> </div> </div> <div class="col-lg-12"> <div class="range range-danger"> <input type="range" name="range" min="1" max="100" value="50" onchange="rangeDanger.value=value"> <output id="rangeDanger">50</output> </div> </div> </div> </div> </div> </div> </body> </html>
body { padding-top:150px; background-color: #AA1A5F; } .range{ display: table; position: relative; height: 25px; margin-top: 20px; background-color: rgb(245, 245, 245); border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); cursor: pointer; } .range input[type="range"] { -webkit-appearance: none !important; -moz-appearance: none !important; -ms-appearance: none !important; -o-appearance: none !important; appearance: none !important; display: table-cell; width: 100%; background-color: transparent; height:40px; cursor: pointer; } .range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; -moz-appearance: none !important; -ms-appearance: none !important; -o-appearance: none !important; appearance: none !important; width: 11px; height: 25px; color: rgb(255, 255, 255); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0px; background-color: rgb(153, 153, 153); } .range input[type="range"]::-moz-slider-thumb { -webkit-appearance: none !important; -moz-appearance: none !important; -ms-appearance: none !important; -o-appearance: none !important; appearance: none !important; width: 11px; height: 25px; color: rgb(255, 255, 255); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0px; background-color: rgb(153, 153, 153); } .range output { display: table-cell; padding: 3px 5px 2px; min-width: 40px; color: rgb(255, 255, 255); background-color: rgb(153, 153, 153); text-align: center; text-decoration: none; border-radius: 4px; border-bottom-left-radius: 0; border-top-left-radius: 0; width: 1%; white-space: nowrap; vertical-align: middle; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; } .range input[type="range"] { outline: none; } .range.range-primary input[type="range"]::-webkit-slider-thumb { background-color: rgb(66, 139, 202); } .range.range-primary input[type="range"]::-moz-slider-thumb { background-color: rgb(66, 139, 202); } .range.range-primary output { background-color: rgb(66, 139, 202); } .range.range-primary input[type="range"] { outline-color: rgb(66, 139, 202); } .range.range-success input[type="range"]::-webkit-slider-thumb { background-color: rgb(92, 184, 92); } .range.range-success input[type="range"]::-moz-slider-thumb { background-color: rgb(92, 184, 92); } .range.range-success output { background-color: rgb(92, 184, 92); } .range.range-success input[type="range"] { outline-color: rgb(92, 184, 92); } .range.range-info input[type="range"]::-webkit-slider-thumb { background-color: rgb(91, 192, 222); } .range.range-info input[type="range"]::-moz-slider-thumb { background-color: rgb(91, 192, 222); } .range.range-info output { background-color: rgb(91, 192, 222); } .range.range-info input[type="range"] { outline-color: rgb(91, 192, 222); } .range.range-warning input[type="range"]::-webkit-slider-thumb { background-color: rgb(240, 173, 78); } .range.range-warning input[type="range"]::-moz-slider-thumb { background-color: rgb(240, 173, 78); } .range.range-warning output { background-color: rgb(240, 173, 78); } .range.range-warning input[type="range"] { outline-color: rgb(240, 173, 78); } .range.range-danger input[type="range"]::-webkit-slider-thumb { background-color: rgb(217, 83, 79); } .range.range-danger input[type="range"]::-moz-slider-thumb { background-color: rgb(217, 83, 79); } .range.range-danger output { background-color: rgb(217, 83, 79); } .range.range-danger input[type="range"] { outline-color: rgb(217, 83, 79); }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post