mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
866 lines
52 KiB
HTML
866 lines
52 KiB
HTML
<!doctype html>
|
||
<!--
|
||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||
* @version 1.0.0-alpha.5
|
||
* @link https://github.com/tabler/tabler
|
||
* Copyright 2018-2019 The Tabler Authors
|
||
* Copyright 2018-2019 codecalm.net Paweł Kuna
|
||
* Licensed under MIT (https://tabler.io/license)
|
||
-->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||
<title>Range slider - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
||
<meta name="msapplication-TileColor" content="#206bc4"/>
|
||
<meta name="theme-color" content="#206bc4"/>
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||
<meta name="mobile-web-app-capable" content="yes"/>
|
||
<meta name="HandheldFriendly" content="True"/>
|
||
<meta name="MobileOptimized" content="320"/>
|
||
<meta name="robots" content="noindex,nofollow,noarchive"/>
|
||
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
|
||
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
|
||
<!-- Libs CSS -->
|
||
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
|
||
<link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
|
||
<link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
|
||
<link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
|
||
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
|
||
<!-- Tabler Core -->
|
||
<link href="../dist/css/tabler.min.css" rel="stylesheet"/>
|
||
<!-- Tabler Plugins -->
|
||
<link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
|
||
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
|
||
<link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
|
||
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
|
||
<style>
|
||
body {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="antialiased">
|
||
<div class="page">
|
||
<header class="navbar navbar-expand-md navbar-light">
|
||
<div class="container-xl">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
|
||
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
|
||
</a>
|
||
<div class="navbar-nav flex-row order-md-last">
|
||
<div class="nav-item dropdown d-none d-md-flex mr-3">
|
||
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
|
||
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
|
||
</svg>
|
||
<span class="badge bg-red"></span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-item dropdown">
|
||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
|
||
<span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
|
||
<div class="d-none d-xl-block pl-2">
|
||
<div>Paweł Kuna</div>
|
||
<div class="mt-1 small text-muted">UI Designer</div>
|
||
</div>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="#">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||
<circle cx="12" cy="12" r="3" />
|
||
</svg>
|
||
Action
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
|
||
<path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
|
||
<line x1="16" y1="5" x2="19" y2="8" />
|
||
</svg>
|
||
Another action
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="navbar-expand-md">
|
||
<div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
|
||
<div class="container-xl">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../index.html" >
|
||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<polyline points="5 12 3 12 12 3 21 12 19 12" />
|
||
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
|
||
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
|
||
</svg>
|
||
</span>
|
||
<span class="nav-link-title">
|
||
Home
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
|
||
<line x1="12" y1="12" x2="20" y2="7.5" />
|
||
<line x1="12" y1="12" x2="12" y2="21" />
|
||
<line x1="12" y1="12" x2="4" y2="7.5" />
|
||
<line x1="16" y1="5.25" x2="8" y2="9.75" />
|
||
</svg>
|
||
</span>
|
||
<span class="nav-link-title">
|
||
User Interface
|
||
</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
|
||
<li >
|
||
<a class="dropdown-item" href="../empty.html" >
|
||
Empty page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../blank.html" >
|
||
Blank page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../buttons.html" >
|
||
Buttons
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../cards.html" >
|
||
Cards
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../dropdowns.html" >
|
||
Dropdowns
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../modals.html" >
|
||
Modals
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../maps.html" >
|
||
Maps
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../maps-vector.html" >
|
||
Vector maps
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../navigation.html" >
|
||
Navigation
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../charts.html" >
|
||
Charts
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../tables.html" >
|
||
Tables
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../calendar.html" >
|
||
Calendar
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../carousel.html" >
|
||
Carousel
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../lists.html" >
|
||
Lists
|
||
</a>
|
||
</li>
|
||
<li class="dropright">
|
||
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
Authentication
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
|
||
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
|
||
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
|
||
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropright">
|
||
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
Error pages
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a href="../400.html" class="dropdown-item">400 page</a>
|
||
<a href="../401.html" class="dropdown-item">401 page</a>
|
||
<a href="../403.html" class="dropdown-item">403 page</a>
|
||
<a href="../404.html" class="dropdown-item">404 page</a>
|
||
<a href="../500.html" class="dropdown-item">500 page</a>
|
||
<a href="../503.html" class="dropdown-item">503 page</a>
|
||
<a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../form-elements.html" >
|
||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<polyline points="9 11 12 14 20 6" />
|
||
<path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
|
||
</svg>
|
||
</span>
|
||
<span class="nav-link-title">
|
||
Form elements
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
|
||
</svg>
|
||
</span>
|
||
<span class="nav-link-title">
|
||
Extra
|
||
</span>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li >
|
||
<a class="dropdown-item" href="../invoice.html" >
|
||
Invoice
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../blog.html" >
|
||
Blog cards
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../snippets.html" >
|
||
Snippets
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../search-results.html" >
|
||
Search results
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../pricing.html" >
|
||
Pricing cards
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../users.html" >
|
||
Users
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../gallery.html" >
|
||
Gallery
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../profile.html" >
|
||
Profile
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../music.html" >
|
||
Music
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<rect x="4" y="4" width="6" height="5" rx="2" />
|
||
<rect x="4" y="13" width="6" height="7" rx="2" />
|
||
<rect x="14" y="4" width="6" height="7" rx="2" />
|
||
<rect x="14" y="15" width="6" height="5" rx="2" />
|
||
</svg>
|
||
</span>
|
||
<span class="nav-link-title">
|
||
Layout
|
||
</span>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-horizontal.html" >
|
||
Horizontal
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-vertical.html" >
|
||
Vertical
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-vertical-right.html" >
|
||
Right vertical
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-condensed.html" >
|
||
Condensed
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-condensed-dark.html" >
|
||
Condensed dark
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-combo.html" >
|
||
Combined
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-navbar-dark.html" >
|
||
Navbar dark
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-dark.html" >
|
||
Dark mode
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-fluid.html" >
|
||
Fluid
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
|
||
Fluid vertical
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item active dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<polyline points="14 3 14 8 19 8" />
|
||
<path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
|
||
<line x1="9" y1="9" x2="10" y2="9" />
|
||
<line x1="9" y1="13" x2="15" y2="13" />
|
||
<line x1="9" y1="17" x2="15" y2="17" />
|
||
</svg>
|
||
</span>
|
||
<span class="nav-link-title">
|
||
Docs
|
||
</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/index.html" >
|
||
Introduction
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/alerts.html" >
|
||
Alerts
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/autosize.html" >
|
||
Autosize
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/avatars.html" >
|
||
Avatars
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/badges.html" >
|
||
Badges
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/breadcrumb.html" >
|
||
Breadcrumb
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/buttons.html" >
|
||
Buttons
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/cards.html" >
|
||
Cards
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/carousel.html" >
|
||
Carousel
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/colors.html" >
|
||
Colors
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/countup.html" >
|
||
Countup
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/cursors.html" >
|
||
Cursors
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/charts.html" >
|
||
Charts
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/dropdowns.html" >
|
||
Dropdowns
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/divider.html" >
|
||
Divider
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/empty.html" >
|
||
Empty states
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/flags.html" >
|
||
Flags
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/form-elements.html" >
|
||
Form elements
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/form-helpers.html" >
|
||
Form helpers
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/input-mask.html" >
|
||
Form input mask
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/modals.html" >
|
||
Modals
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/progress.html" >
|
||
Progress
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/payments.html" >
|
||
Payments
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item active" href="../docs/range-slider.html" >
|
||
Range slider
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/ribbons.html" >
|
||
Ribbons
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/spinners.html" >
|
||
Spinners
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/steps.html" >
|
||
Steps
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/tables.html" >
|
||
Tables
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/tabs.html" >
|
||
Tabs
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/timelines.html" >
|
||
Timelines
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/toasts.html" >
|
||
Toasts
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/tooltips.html" >
|
||
Tooltips
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/typography.html" >
|
||
Typography
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
|
||
<form action="." method="get">
|
||
<div class="input-icon">
|
||
<span class="input-icon-addon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<circle cx="10" cy="10" r="7" />
|
||
<line x1="21" y1="21" x2="15" y2="15" />
|
||
</svg>
|
||
</span>
|
||
<input type="text" class="form-control" placeholder="Search…">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="container-xl">
|
||
<!-- Page title -->
|
||
<div class="page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<h2 class="page-title">
|
||
Documentation
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
|
||
<div class="sticky-top">
|
||
<a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
|
||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
|
||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
||
</svg>
|
||
Browse source code
|
||
</a>
|
||
<h5 class="subheader">On this page</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="toc-entry toc-h2"><a href="#basic-range-slider">Basic range slider</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#basic-options">Basic options</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#js-name">js-name</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#start">start</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#range">range</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#step">step</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#connect">connect</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#margin">margin</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#limit">limit</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#padding">padding</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-9">
|
||
<div class="card card-lg">
|
||
<div class="card-body">
|
||
<div class="markdown">
|
||
<div class="d-flex">
|
||
<h2 class="h1 mt-0 mb-3">Range slider</h2>
|
||
</div>
|
||
<p>All options and features can be found <a href="https://refreshless.com/nouislider/"><strong>here</strong></a>.</p>
|
||
<h2 id="basic-range-slider">Basic range slider</h2>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}"></div>
|
||
<p demo-slider="slider0"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider0"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<p>That’s how values are displayed:</p>
|
||
<div class="language-js highlighter-rouge">
|
||
<div class="highlight">
|
||
<pre class="highlight"><code><span class="cm">/* Demo only */</span>
|
||
|
||
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="cm">/* Sliders value */</span>
|
||
<span class="kd">let</span> <span class="nx">slidersText</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">[demo-slider]</span><span class="dl">'</span><span class="p">);</span>
|
||
<span class="k">for</span><span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">slidersText</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
|
||
<span class="nb">window</span><span class="p">[</span><span class="nx">slidersText</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">demo-slider</span><span class="dl">"</span><span class="p">)].</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">update</span><span class="dl">'</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">values</span><span class="p">){</span>
|
||
<span class="nx">slidersText</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">values</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">'</span><span class="s1"> | </span><span class="dl">'</span><span class="p">);</span>
|
||
<span class="p">})</span>
|
||
<span class="p">}</span>
|
||
<span class="p">});</span>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
<h2 id="basic-options">Basic options</h2>
|
||
<p>Basic range slider options.</p>
|
||
<h2 id="js-name">js-name</h2>
|
||
<p>By setting <code class="highlighter-rouge">js-name</code> you can access slider in your js code. <strong>Remember to use it in your code after the page has loaded.</strong></p>
|
||
<div class="language-js highlighter-rouge">
|
||
<div class="highlight">
|
||
<pre class="highlight"><code><span class="cm">/* Example */</span>
|
||
|
||
<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="nx">slider</span><span class="p">;</span>
|
||
|
||
<span class="kd">function</span> <span class="nx">slider</span><span class="p">(){</span>
|
||
<span class="kd">let</span> <span class="nx">sliderText</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">sliderText</span><span class="dl">'</span><span class="p">);</span>
|
||
<span class="nx">slider1</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">update</span><span class="dl">'</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">values</span><span class="p">,</span><span class="nx">handle</span><span class="p">){</span>
|
||
<span class="nx">sliderText</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">values</span><span class="p">[</span><span class="nx">handle</span><span class="p">];</span>
|
||
<span class="p">});</span>
|
||
<span class="p">}</span>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider1","start": 50,"range": {"min": 0,"max": 100}}"></div>
|
||
<p id="sliderText" demo-slider="slider1"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider1","start": 50,"range": {"min": 0,"max": 100}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"sliderText"</span> <span class="na">demo-slider=</span><span class="s">"slider1"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="start">start</h2>
|
||
<p>The <code class="highlighter-rouge">start</code> option sets the number of handles and corresponding start positions.</p>
|
||
<p>The <code class="highlighter-rouge">start</code> option uses the slider’s <code class="highlighter-rouge">'format'</code> option to decode the input. Number input will be cast to string and decoded.</p>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider2","start": 30,"range": {"min": 0,"max": 100}}"></div>
|
||
<p demo-slider="slider2"></p>
|
||
<div data-slider="{"js-name": "slider3","start": [40,65],"range": {"min": 0,"max": 100}}"></div>
|
||
<p demo-slider="slider3"></p>
|
||
<div data-slider="{"js-name": "slider4","start": [25,50,75],"range": {"min": 0,"max": 100}}"></div>
|
||
<p demo-slider="slider4"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider2","start": 30,"range": {"min": 0,"max": 100}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider2"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider3","start": [40,65],"range": {"min": 0,"max": 100}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider3"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider4","start": [25,50,75],"range": {"min": 0,"max": 100}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider4"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="range">range</h2>
|
||
<p>All values on the slider are part of a range. The range has a minimum and maximum value. <strong>The minimum value cannot be equal to the maximum value.</strong></p>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider5","start": 500,"range": {"min": -2000,"max": 10000}}"></div>
|
||
<p demo-slider="slider5"></p>
|
||
<div data-slider="{"js-name": "slider6","start": [-250,800],"range": {"min": -500,"max": 1000}}"></div>
|
||
<p demo-slider="slider6"></p>
|
||
<div data-slider="{"js-name": "slider7","start": [0.1,0.4,0.9],"range": {"min": 0.1,"max": 1}}"></div>
|
||
<p demo-slider="slider7"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider5","start": 500,"range": {"min": -2000,"max": 10000}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider5"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider6","start": [-250,800],"range": {"min": -500,"max": 1000}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider6"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider7","start": [0.1,0.4,0.9],"range": {"min": 0.1,"max": 1}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider7"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="step">step</h2>
|
||
<p>By default, the slider slides fluently. In order to make the handles jump between intervals, you can use the step option.</p>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider8","start": 5000,"range": {"min": 1000,"max": 10000},"step": 1000}"></div>
|
||
<p demo-slider="slider8"></p>
|
||
<div data-slider="{"js-name": "slider9","start": 500,"range": {"min": 100,"max": 1000},"step": 125}"></div>
|
||
<p demo-slider="slider9"></p>
|
||
<div data-slider="{"js-name": "slider10","start": 50,"range": {"min": 10,"max": 100},"step": 5}"></div>
|
||
<p demo-slider="slider10"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider8","start": 5000,"range": {"min": 1000,"max": 10000},"step": 1000}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider8"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider9","start": 500,"range": {"min": 100,"max": 1000},"step": 125}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider9"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider10","start": 50,"range": {"min": 10,"max": 100},"step": 5}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider10"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="connect">connect</h2>
|
||
<p>The connect option can be used to control the bar between the handles or the edges of the slider.</p>
|
||
<p>If you are using one handle, set the value to either <code class="highlighter-rouge">'upper'</code> or <code class="highlighter-rouge">'lower'</code>.
|
||
For sliders with 2 or more handles, pass an array with a boolean for every connecting element, including the edges of the slider. The length of this array must match the handle count + 1.</p>
|
||
<p>Setting true sets the bars between the handles, but not between the handles and the sliders edges.</p>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider11","start": 8000,"connect": "lower","range": {"min": [2000],"max": [20000]}}"></div>
|
||
<p demo-slider="slider11"></p>
|
||
<div data-slider="{"js-name": "slider12","start": 8000,"connect": "upper","range": {"min": [2000],"max": [20000]}}"></div>
|
||
<p demo-slider="slider12"></p>
|
||
<div data-slider="{"js-name": "slider13","start": [4000, 8000, 12000, 16000],"connect": [false, true, true, false, true],"range": {"min": [2000],"max": [20000]}}"></div>
|
||
<p demo-slider="slider13"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider11","start": 8000,"connect": "lower","range": {"min": [2000],"max": [20000]}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider11"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider12","start": 8000,"connect": "upper","range": {"min": [2000],"max": [20000]}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider12"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider13","start": [4000, 8000, 12000, 16000],"connect": [false, true, true, false, true],"range": {"min": [2000],"max": [20000]}}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider13"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="margin">margin</h2>
|
||
<p>When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in ‘range’. This option is only available on linear sliders.</p>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider14","start": [20,80],"range": {"min": 0,"max": 100},"margin":30}"></div>
|
||
<p demo-slider="slider14"></p>
|
||
<div data-slider="{"js-name": "slider15","start": [20,80],"range": {"min": 0,"max": 100},"margin":50}"></div>
|
||
<p demo-slider="slider15"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider14","start": [20,80],"range": {"min": 0,"max": 100},"margin":30}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider14"</span><span class="nt">></p></span>
|
||
<span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider15","start": [20,80],"range": {"min": 0,"max": 100},"margin":50}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider15"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="limit">limit</h2>
|
||
<p>The <code class="highlighter-rouge">limit</code> option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the <code class="highlighter-rouge">limit</code> option can only be used on linear sliders.</p>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider16","start": [10,120],"connect":true,"range": {"min": 0,"max": 100},"limit":40,"behaviour":"drag"}"></div>
|
||
<p demo-slider="slider16"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider16","start": [10,120],"connect":true,"range": {"min": 0,"max": 100},"limit":40,"behaviour":"drag"}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider16"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="padding">padding</h2>
|
||
<p>Padding limits how close to the slider edges handles can be.</p>
|
||
<div class="example no_toc_section">
|
||
<div class="example-content">
|
||
<div data-slider="{"js-name": "slider17","start": [20,80],"range": {"min": 0,"max": 100},"padding":[10,15]}"></div>
|
||
<p demo-slider="slider17"></p>
|
||
</div>
|
||
</div>
|
||
<div class="example-code">
|
||
<figure class="highlight">
|
||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">data-slider=</span><span class="s">'{"js-name": "slider17","start": [20,80],"range": {"min": 0,"max": 100},"padding":[10,15]}'</span><span class="nt">></div></span>
|
||
<span class="nt"><p</span> <span class="na">demo-slider=</span><span class="s">"slider17"</span><span class="nt">></p></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<p>That’s only the basic features and options of range slider. More possibilities can be found <a href="https://refreshless.com/nouislider/"><strong>here</strong></a>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="footer footer-transparent">
|
||
<div class="container">
|
||
<div class="row text-center align-items-center flex-row-reverse">
|
||
<div class="col-lg-auto ml-lg-auto">
|
||
<ul class="list-inline list-inline-dots mb-0">
|
||
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
|
||
<li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
|
||
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
|
||
Copyright © 2020
|
||
<a href=".." class="link-secondary">Tabler</a>.
|
||
All rights reserved.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
<!-- Libs JS -->
|
||
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
|
||
<!-- Tabler Core -->
|
||
<script src="../dist/js/tabler.min.js"></script>
|
||
<script>
|
||
document.body.style.display = "block"
|
||
</script>
|
||
</body>
|
||
</html> |