mirror of
https://github.com/Hopiu/djLint.git
synced 2026-05-28 06:13:59 +00:00
363 lines
19 KiB
HTML
363 lines
19 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% block title %}UI Sliders {% endblock %}
|
|
<!-- Element injected in the BODY element -->
|
|
{% block body_class %}{% endblock body_class %}
|
|
<!-- Specific Page CSS goes HERE -->
|
|
{% block stylesheets %}
|
|
<!-- Google Font: Source Sans Pro -->
|
|
<link rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
|
|
<!-- Ion Slider -->
|
|
<link rel="stylesheet" href="/static/assets/plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
|
|
<!-- bootstrap slider -->
|
|
<link rel="stylesheet" href="/static/assets/plugins/bootstrap-slider/css/bootstrap-slider.min.css">
|
|
<!-- Theme style -->
|
|
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
|
|
{% endblock stylesheets %}
|
|
{% block content %}
|
|
<!-- Content Wrapper. Contains page content -->
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1>Sliders</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item">
|
|
<a href="#">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">
|
|
Sliders
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</section>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card card-primary">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Ion Slider</h3>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
<div class="row margin">
|
|
<div class="col-sm-6">
|
|
<input id="range_1" type="text" name="range_1" value="">
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<input id="range_2"
|
|
type="text"
|
|
name="range_2"
|
|
value="1000;100000"
|
|
data-type="double"
|
|
data-step="500"
|
|
data-postfix=" €"
|
|
data-from="30000"
|
|
data-to="90000"
|
|
data-hasgrid="true">
|
|
</div>
|
|
</div>
|
|
<div class="row margin">
|
|
<div class="col-sm-6">
|
|
<input id="range_5" type="text" name="range_5" value="">
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<input id="range_6" type="text" name="range_6" value="">
|
|
</div>
|
|
</div>
|
|
<div class="row margin">
|
|
<div class="col-sm-12">
|
|
<input id="range_4" type="text" name="range_4" value="10000;100000">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card card-primary">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Bootstrap Slider</h3>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
<div class="row margin">
|
|
<div class="col-sm-6">
|
|
<div class="slider-red">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="horizontal"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<p>
|
|
.slider-red input.slider
|
|
</p>
|
|
<div class="slider-blue">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="horizontal"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<p>
|
|
.slider-blue input.slider
|
|
</p>
|
|
<div class="slider-green">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="horizontal"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<p>
|
|
.slider-green input.slider
|
|
</p>
|
|
<div class="slider-yellow">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="horizontal"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<p>
|
|
.slider-yellow input.slider
|
|
</p>
|
|
<div class="slider-teal">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="horizontal"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<p>
|
|
.slider-teal input.slider
|
|
</p>
|
|
<div class="slider-purple">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="horizontal"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<p>
|
|
.slider-purple input.slider
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-6 d-flex justify-content-center">
|
|
<div class="slider-red mx-3">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="vertical"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<div class="slider-blue mx-3">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="vertical"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<div class="slider-green mx-3">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="vertical"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<div class="slider-yellow mx-3">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="vertical"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<div class="slider-teal mx-3">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="vertical"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
<div class="slider-purple mx-3">
|
|
<input type="text"
|
|
value=""
|
|
class="slider form-control"
|
|
data-slider-min="-200"
|
|
data-slider-max="200"
|
|
data-slider-step="5"
|
|
data-slider-value="[-100,100]"
|
|
data-slider-orientation="vertical"
|
|
data-slider-selection="before"
|
|
data-slider-tooltip="show">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
{% endblock content %}
|
|
<!-- Specific Page JS goes HERE -->
|
|
{% block javascripts %}
|
|
<!-- jQuery -->
|
|
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
|
|
<!-- Bootstrap 4 -->
|
|
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<!-- AdminLTE App -->
|
|
<script src="/static/assets/js/adminlte.min.js"></script>
|
|
<!-- AdminLTE for demo purposes -->
|
|
<script src="/static/assets/js/demo.js"></script>
|
|
<!-- Ion Slider -->
|
|
<script src="/static/assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
|
|
<!-- Bootstrap slider -->
|
|
<script src="/static/assets/plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
|
|
<script>
|
|
$(function () {
|
|
/* BOOTSTRAP SLIDER */
|
|
$('.slider').bootstrapSlider()
|
|
|
|
/* ION SLIDER */
|
|
$('#range_1').ionRangeSlider({
|
|
min : 0,
|
|
max : 5000,
|
|
from : 1000,
|
|
to : 4000,
|
|
type : 'double',
|
|
step : 1,
|
|
prefix : '$',
|
|
prettify: false,
|
|
hasGrid : true
|
|
})
|
|
$('#range_2').ionRangeSlider()
|
|
|
|
$('#range_5').ionRangeSlider({
|
|
min : 0,
|
|
max : 10,
|
|
type : 'single',
|
|
step : 0.1,
|
|
postfix : ' mm',
|
|
prettify: false,
|
|
hasGrid : true
|
|
})
|
|
$('#range_6').ionRangeSlider({
|
|
min : -50,
|
|
max : 50,
|
|
from : 0,
|
|
type : 'single',
|
|
step : 1,
|
|
postfix : '°',
|
|
prettify: false,
|
|
hasGrid : true
|
|
})
|
|
|
|
$('#range_4').ionRangeSlider({
|
|
type : 'single',
|
|
step : 100,
|
|
postfix : ' light years',
|
|
from : 55000,
|
|
hideMinMax: true,
|
|
hideFromTo: false
|
|
})
|
|
$('#range_3').ionRangeSlider({
|
|
type : 'double',
|
|
postfix : ' miles',
|
|
step : 10000,
|
|
from : 25000000,
|
|
to : 35000000,
|
|
onChange: function (obj) {
|
|
var t = ''
|
|
for (var prop in obj) {
|
|
t += prop + ': ' + obj[prop] + '\r\n'
|
|
}
|
|
$('#result').html(t)
|
|
},
|
|
onLoad : function (obj) {
|
|
//
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
{% endblock javascripts %}
|