<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<script src="https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/js/plugins/nouislider.min.js"></script>
<script src="https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/js/plugins/bootstrap-switch.js"></script>
</head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
<div class="section section-basic mt-5" id="basic-elements">
<div class="container">
<div class="row" id="checkRadios">
<div class="col-sm-6 col-lg-3 mb-4">
<p class="category">Checkboxes</p>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<span class="form-check-sign"></span>
Unchecked
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-sign"></span>
Checked
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-sign"></span>
Disabled Unchecked
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" checked="" disabled="">
<span class="form-check-sign"></span>
Disabled Checked
</label>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-4">
<p class="category">Radios</p>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<span class="form-check-sign"></span>
Radio is off
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option2" checked="">
<span class="form-check-sign"></span>
Radio is on
</label>
</div>
<div class="form-check form-check-radio disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios2" value="option3" disabled="">
<span class="form-check-sign"></span>
Disabled radio is off
</label>
</div>
<div class="form-check form-check-radio disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios2" value="option4" disabled="" checked="">
<span class="form-check-sign"></span>
Disabled radio is on
</label>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<p class="category">Toggle Buttons</p>
<input type="checkbox" name="checkbox" class="bootstrap-switch" checked/>
<br>
<input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-label="ON" data-off-label="OFF" />
</div>
<div class="col-sm-6 col-lg-3">
<p class="category">Sliders</p>
<div id="sliderRegular" class="slider"></div>
<br>
<div id="sliderDouble" class="slider slider-primary"></div>
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/now-ui-kit/index.html" target="_blank">Now UI Kit</a> by Creative Tim</p>
</footer>
@font-face {
font-family: 'Nucleo Outline';
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
font-weight: normal;
font-style: normal;
}
button,
input {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
body {
color: #2c2c2c;
font-size: 14px;
font-family: Montserrat,Helvetica Neue,Arial,sans-serif;
overflow-x: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.bootstrap-switch {
display: inline-block;
direction: ltr;
cursor: pointer;
border-radius: 30px;
border: 0;
position: relative;
text-align: left;
margin-bottom: 10px;
line-height: 8px;
width: 59px !important;
height: 22px;
outline: none;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
margin-right: 20px;
background: rgba(44, 44, 44, 0.2);
}
.bootstrap-switch .bootstrap-switch-container {
display: inline-flex;
top: 0;
height: 22px;
border-radius: 4px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 100px !important;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: inline-block !important;
height: 100%;
color: #fff;
padding: 6px 12px;
font-size: 11px;
text-indent: -5px;
line-height: 15px;
-webkit-transition: 0.25s ease-out;
transition: 0.25s ease-out;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
float: left;
line-height: 11px;
width: 50% !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
color: #fff;
}
.bootstrap-switch .bootstrap-switch-label {
text-align: center;
z-index: 100;
color: #333333;
background: #ffffff;
width: 22px !important;
height: 22px !important;
margin: 0px -11px;
border-radius: 20px;
position: absolute;
float: left;
top: 0;
left: 50%;
padding: 0;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25);
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
background-color: rgba(23, 23, 23, 0.4);
}
.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label {
width: 27px !important;
margin-left: -16px;
}
.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label {
width: 27px !important;
margin-left: -11px;
}
.bootstrap-switch .bootstrap-switch-handle-on {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.bootstrap-switch .bootstrap-switch-handle-off {
text-indent: 6px;
}
.bootstrap-switch input[type='radio'],
.bootstrap-switch input[type='checkbox'] {
position: absolute !important;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
z-index: -1;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-webkit-transition: margin-left 0.5s;
transition: margin-left 0.5s;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
margin-left: -2px !important;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
margin-left: -39px !important;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label:before {
background-color: #FFFFFF;
}
.bootstrap-switch-off .bootstrap-switch-handle-on {
opacity: 0;
}
.bootstrap-switch-on .bootstrap-switch-handle-off {
opacity: 0;
}
/*! nouislider - 11.1.0 - 2018-04-02 11:18:13 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
}
.noUi-base,
.noUi-connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
/* Wrapper for all connect elements.
*/
.noUi-connects {
overflow: hidden;
z-index: 0;
}
.noUi-connect,
.noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* Offset direction
*/
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
left: auto;
right: 0;
}
/* Give origins 0 height/width so they don't interfere with clicking the
* connect elements.
*/
.noUi-vertical .noUi-origin {
width: 0;
}
.noUi-horizontal .noUi-origin {
height: 0;
}
.noUi-handle {
position: absolute;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: transform 0.3s;
transition: transform 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 1px;
}
.noUi-horizontal .noUi-handle {
border-radius: 50%;
background-color: #FFFFFF;
box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2);
height: 15px;
width: 15px;
cursor: pointer;
outline: 0;
}
.noUi-horizontal .noUi-handle:before,
.noUi-horizontal .noUi-handle:after {
display: none;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}
html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
right: -10px;
top: -7px;
left: auto;
}
/* Styling;
* Giving the connect element a border radius causes issues with using transform: scale
*/
.noUi-target {
background-color: rgba(182, 182, 182, 0.3);
border-radius: 3px;
}
.noUi-connects {
border-radius: 3px;
}
.noUi-connect {
background: #3FB8AF;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
border-radius: 3px;
background: #FFF;
cursor: default;
-webkit-transition: 300ms ease 0s;
-moz-transition: 300ms ease 0s;
-ms-transition: 300ms ease 0s;
-o-transform: 300ms ease 0s;
transition: 300ms ease 0s;
}
.noUi-active {
-webkit-transform: scale3d(1.5, 1.5, 1);
-moz-transform: scale3d(1.5, 1.5, 1);
-ms-transform: scale3d(1.5, 1.5, 1);
-o-transform: scale3d(1.5, 1.5, 1);
transform: scale3d(1.5, 1.5, 1);
}
/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
white-space: nowrap;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%, 0);
padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
.slider .noUi-connect {
background-color: #888888;
}
.slider.slider-neutral .noUi-connect {
background-color: #FFFFFF;
}
.slider.slider-neutral.noUi-target {
background-color: rgba(255, 255, 255, 0.3);
}
.slider.slider-neutral .noUi-handle {
background-color: #FFFFFF;
}
.slider.slider-primary .noUi-connect,
.slider.slider-primary.noUi-connect {
background-color: #f96332;
}
.slider.slider-primary.noUi-target {
background-color: rgba(249, 99, 50, 0.3);
}
.slider.slider-primary .noUi-handle {
background-color: #f96332;
}
.slider.slider-info .noUi-connect,
.slider.slider-info.noUi-connect {
background-color: #2CA8FF;
}
.slider.slider-info.noUi-target {
background-color: rgba(44, 168, 255, 0.3);
}
.slider.slider-info .noUi-handle {
background-color: #2CA8FF;
}
.slider.slider-success .noUi-connect,
.slider.slider-success.noUi-connect {
background-color: #18ce0f;
}
.slider.slider-success.noUi-target {
background-color: rgba(24, 206, 15, 0.3);
}
.slider.slider-success .noUi-handle {
background-color: #18ce0f;
}
.slider.slider-warning .noUi-connect,
.slider.slider-warning.noUi-connect {
background-color: #FFB236;
}
.slider.slider-warning.noUi-target {
background-color: rgba(255, 178, 54, 0.3);
}
.slider.slider-warning .noUi-handle {
background-color: #FFB236;
}
.slider.slider-danger .noUi-connect,
.slider.slider-danger.noUi-connect {
background-color: #FF3636;
}
.slider.slider-danger.noUi-target {
background-color: rgba(255, 54, 54, 0.3);
}
.slider.slider-danger .noUi-handle {
background-color: #FF3636;
}
.form-check {
margin-top: .65rem;
padding-left: 0;
}
.form-check .form-check-label {
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 35px;
line-height: 26px;
margin-bottom: 0;
-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
-ms-transition: color 0.3s linear;
transition: color 0.3s linear;
}
.radio .form-check-sign {
padding-left: 28px;
}
.form-check .form-check-sign::before,
.form-check .form-check-sign::after {
content: " ";
display: inline-block;
position: absolute;
width: 26px;
height: 26px;
left: 0;
cursor: pointer;
border-radius: 3px;
top: 0;
background-color: transparent;
border: 1px solid #E3E3E3;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.form-check .form-check-sign::after {
font-family: 'Nucleo Outline';
content: "\ea22";
top: 0px;
text-align: center;
font-size: 14px;
opacity: 0;
color: #555555;
border: 0;
background-color: inherit;
}
.form-check.disabled .form-check-label,
.form-check.disabled .form-check-label {
color: #9A9A9A;
opacity: .5;
cursor: not-allowed;
}
.form-check input[type="checkbox"],
.radio input[type="radio"] {
opacity: 0;
position: absolute;
visibility: hidden;
}
.form-check input[type="checkbox"]:checked+.form-check-sign::after {
opacity: 1;
}
.checkbox input[type="checkbox"]:disabled+.form-check-sign::after {
cursor: not-allowed;
}
.form-check input[type="checkbox"]:disabled+.form-check-sign,
.form-check input[type="radio"]:disabled+.form-check-sign {
pointer-events: none;
}
.form-check-radio .form-check-sign::before,
.form-check-radio .form-check-sign::after {
content: " ";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #E3E3E3;
display: inline-block;
position: absolute;
left: 3px;
top: 3px;
padding: 1px;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.form-check-radio input[type="radio"]+.form-check-sign:after,
.form-check-radio input[type="radio"] {
opacity: 0;
}
.form-check-radio input[type="radio"]:checked+.form-check-sign::after {
width: 4px;
height: 4px;
background-color: #555555;
border-color: #555555;
top: 11px;
left: 11px;
opacity: 1;
}
.form-check-radio input[type="radio"]:checked+.form-check-sign::after {
opacity: 1;
}
.form-check-radio input[type="radio"]:disabled+.form-check-sign {
color: #9A9A9A;
}
.form-check-radio input[type="radio"]:disabled+.form-check-sign::before,
.form-check-radio input[type="radio"]:disabled+.form-check-sign::after {
color: #9A9A9A;
}
button,
input {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
p {
line-height: 1.61em;
font-weight: 300;
font-size: 1.2em;
}
.category {
text-transform: capitalize;
font-weight: 700;
color: #9A9A9A;
}
.bootstrap-switch-label:before {
-webkit-transition: all 150ms ease 0s;
-moz-transition: all 150ms ease 0s;
-o-transition: all 150ms ease 0s;
-ms-transition: all 150ms ease 0s;
transition: all 150ms ease 0s;
}
@font-face {
font-family: 'Nucleo Outline';
src: url("../fonts/nucleo-outline.eot");
src: url("../fonts/nucleo-outline.eot") format("embedded-opentype"), url("../fonts/nucleo-outline.woff2") format("woff2"), url("../fonts/nucleo-outline.woff") format("woff"), url("../fonts/nucleo-outline.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.section {
padding: 70px 0;
position: relative;
background: #FFFFFF;
}
.section .row+.category {
margin-top: 15px;
}
[data-background-color="orange"] {
background-color: #e95e38;
}
[data-background-color="black"] {
background-color: #2c2c2c;
}
[data-background-color]:not([data-background-color="gray"]) {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) p {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .checkbox label::before,
[data-background-color]:not([data-background-color="gray"]) .checkbox label::after,
[data-background-color]:not([data-background-color="gray"]) .radio label::before,
[data-background-color]:not([data-background-color="gray"]) .radio label::after {
border-color: rgba(255, 255, 255, 0.2);
}
[data-background-color]:not([data-background-color="gray"]) .checkbox label::after,
[data-background-color]:not([data-background-color="gray"]) .checkbox label,
[data-background-color]:not([data-background-color="gray"]) .radio label {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .checkbox input[type="checkbox"]:disabled+label,
[data-background-color]:not([data-background-color="gray"]) .radio input[type="radio"]:disabled+label {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .radio input[type="radio"]:not(:disabled):hover+label::after,
[data-background-color]:not([data-background-color="gray"]) .radio input[type="radio"]:checked+label::after {
background-color: #FFFFFF;
border-color: #FFFFFF;
}
.section-basic {
padding-top: 0;
}
footer {
margin-top: 50px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
background: #f7f7f7;
}
.footer p {
margin-bottom: 0;
}
footer p a {
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #e86c42;
}
nowuiKit = {
initSliders: function() {
// Sliders for demo purpose in refine cards section
var slider = document.getElementById('sliderRegular');
noUiSlider.create(slider, {
start: 40,
connect: [true, false],
range: {
min: 0,
max: 100
}
});
var slider2 = document.getElementById('sliderDouble');
noUiSlider.create(slider2, {
start: [20, 60],
connect: true,
range: {
min: 0,
max: 100
}
});
}
}
$(document).ready(function() {
// Activate bootstrapSwitch
$('.bootstrap-switch').each(function() {
$this = $(this);
data_on_label = $this.data('on-label') || '';
data_off_label = $this.data('off-label') || '';
$this.bootstrapSwitch({
onText: data_on_label,
offText: data_off_label
});
});
nowuiKit.initSliders();
});
