<?php 
	 require_once __DIR__ . '/config/dz.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
	<title><?php echo !empty($DexignZoneSettings['pagelevel'][$CurrentPage]['title']) ? $DexignZoneSettings['pagelevel'][$CurrentPage]['title'].' | ' : '' ; echo $DexignZoneSettings['site_level']['site_title'] ?></title>
	<?php include 'elements/meta.php';?>
	<!-- FAVICONS ICON -->
	<link rel="shortcut icon" type="image/png" href="<?php echo $DexignZoneSettings['site_level']['favicon']?>">
	<?php include 'elements/page-css.php'; ?>

</head>
<body>

    <!--*******************
        Preloader start
    ********************-->
   <?php include 'elements/preloader.php'; ?>
    <!--*******************
        Preloader end
    ********************-->


    <!--**********************************
        Main wrapper start
    ***********************************-->
    <div id="main-wrapper">

        <!--**********************************
            Nav header start
        ***********************************-->
     <?php include 'elements/nav-header.php'; ?>
        <!--**********************************
            Nav header end
        ***********************************-->
		
		<!--**********************************
            Chat box start
        ***********************************-->
		<?php include 'elements/chatbox.php'; ?>
		<!--**********************************
            Chat box End
        ***********************************-->


		
		
        <!--**********************************
            Header start
        ***********************************-->
       		<?php include 'elements/header.php'; ?>
  
        <!--**********************************
            Header end ti-comment-alt
        ***********************************-->

        <!--**********************************
            Sidebar start
        ***********************************-->
		<?php include 'elements/sidebar.php'; ?>
        <!--**********************************
            Sidebar end
        ***********************************-->

        <!--**********************************
            Content body start
        ***********************************-->
        <div class="content-body default-height">
            <div class="container-fluid">
				<div class="row page-titles">
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a href="javascript:void(0)">Plugins</a></li>
						<li class="breadcrumb-item active"><a href="javascript:void(0)">UI Slider</a></li>
					</ol>
                </div>
				<div class="row">
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Basic slider</h4>
                            </div>
							<div class="card-body">
                                <div id="basic-slider"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Stepping and snapping to values</h4>
                            </div>
							<div class="card-body">
                                <div class="stepping-slider">
                                    <div id="slider-step"></div>
                                    <span class="example-val" id="slider-step-value"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider margin</h4>
                            </div>
							<div class="card-body">
                                <div class="margin-slider">
                                    <div id="slider-margin"></div>
                                    <span class="example-val" id="slider-margin-value-min"></span>
                                    <span class="example-val" id="slider-margin-value-max"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider limit</h4>
                            </div>
							<div class="card-body">
                                <div class="limit-slider">
                                    <div id="slider-limit"></div>
                                    <span class="example-val" id="slider-limit-value-min"></span>
                                    <span class="example-val" id="slider-limit-value-max"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider padding</h4>
                            </div>
							<div class="card-body">
                                <div class="padding-slider">
                                    <div id="slider-padding"></div>
                                    <span class="example-val" id="slider-padding-value-min"></span>
                                    <span class="example-val" id="slider-padding-value-max"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider tooltip</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-tooltip ">
                                    <div id="slider-tooltips"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider behaviour (Drag)</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-behaviour">
                                    <div id="behaviour"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider behaviour (Tap)</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-behaviour">
                                    <div id="tap"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider behaviour (Fixed dragging)</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-behaviour">
                                    <div id="drag-fixed"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider behaviour (Snap)</h4>
                            </div>
							<div class="card-body">
                                <div class="snap">
                                    <div id="snap"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider behaviour (hover)</h4>
                            </div>
							<div class="card-body">
                                <div class="snap">
                                    <div id="hover"></div>
                                    <span class="example-val mt-4 d-inline-block" id="hover-val"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
							<div class="card-header">
                                <h4 class="card-title">Slider behaviour (unconstrained)</h4>
                            </div>
							<div class="card-body">
                                <div class="unconstrained">
                                    <div id="unconstrained" class="mb-4"></div>
                                    <span class="example-val" id="unconstrained-values"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider behaviour (combined)</h4>
                            </div>
							<div class="card-body">
                                <div class="combined">
                                    <div id="combined"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider range (left to right)</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-range  mb-5">
                                    <div id="pips-range"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider range (right to left)</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-range  mb-5">
                                    <div id="pips-range-rtl"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider range Vertical (top to bottom)</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-range ">
                                    <div id="pips-range-vertical" class="slider-vertical"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider range Vertical (bottom to top)</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-range ">
                                    <div id="pips-range-vertical-rtl" class="slider-vertical"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Pip positions</h4>
                            </div>
							<div class="card-body">
                                <div class="pip-position mb-5">
                                    <div id="pips-positions"></div>
                                </div>
                            </div>
                        </div>
                    </div>
					<div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Pip position stepped</h4>
                            </div>
							<div class="card-body">
                                <div class="pip-position mb-5">
                                    <div id="pips-positions-stepped"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Pips count</h4>
                            </div>
							<div class="card-body">
                                <div class="pips-count mb-5">
                                    <div id="pips-count"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Pips count (stepped)</h4>
                            </div>
							<div class="card-body">
                                <div class="pips-count mb-5">
                                    <div id="pips-count-stepped"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Pips value</h4>
                            </div>
							<div class="card-body">
                                <div class="pips-values mb-5">
                                    <div id="pips-values"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Pips values (stepped)</h4>
                            </div>
							<div class="card-body">
                                <div class="pips-values mb-5">
                                    <div id="pips-values-stepped"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Disabling a slider</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-disabled ">
                                    <div id="disable1" class="mb-4"></div>
                                    <div class="form-check custom-checkbox checkbox-primary me-3">
										<input type="checkbox" class="form-check-input" id="checkbox1" required="">
										<label class="form-check-label form-label" for="checkbox1">Disable handle 1</label>
									</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Disabling a slider</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-disabled ">
                                    <div id="disable2"></div>
                                    <div class="form-check custom-checkbox checkbox-primary  me-3">
										<input type="checkbox" class="form-check-input" id="checkbox2" required="">
										<label class="form-check-label form-label" for="checkbox2">Disable handle 1</label>
									</div>
									<div class="form-check custom-checkbox checkbox-primary  me-3">
										<input type="checkbox" class="form-check-input" id="checkbox3" required="">
										<label class="form-check-label form-label" for="checkbox3">Disable handle 1</label>
									</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Updating a slider</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-update ">
                                    <div id="slider-update"></div>
                                    <span class="example-val d-block my-4" id="slider-update-value"></span>
                                    <button class="update-button btn btn-primary btn-sm mb-2" id="update-1">Set range [20, 50]</button>
                                    <button class="update-button btn btn-info btn-sm mb-2" id="update-2">Set range [10, 40]</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Keyboard slider</h4>
                            </div>
							<div class="card-body">
                                <div class="card-title mb-3 mb-xl-4"></div>
                                <div id="keyboardslider"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Working with dates</h4>
                            </div>
							<div class="card-body">
                                <div class="date-slider">
                                    <div id="slider-date"></div>
                                    <div class="example-val my-4" id="event-start"></div>
                                    <div class="example-val" id="event-end"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
							<div class="card-header">
                                <h4 class="card-title">Using HTML5 input elements</h4>
                            </div>
							<div class="card-body">
                                <div class="input-element">
                                    <div id="html5"></div>
                                    <div class="inputs mt-4">
                                        <select class="form-control my-4" id="input-select"></select>
                                        <input class="form-control" type="number" min="-20" max="40" step="1" id="input-number">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Non linear slider</h4>
                            </div>
							<div class="card-body">
                                <div class="nonlinear-slider">
                                    <div id="nonlinear"></div>
                                    <div class="outputs mt-4">
                                        <span class="example-val" id="lower-value"></span>
                                        <span class="example-val" id="upper-value"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Snapping between steps</h4>
                            </div>
							<div class="card-body">
                                <div class="nonlinear-slider">
                                    <div id="slider-snap"></div>
                                    <span class="example-val" id="slider-snap-value-lower"></span>
                                    <span class="example-val" id="slider-snap-value-upper"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Stepping in non-linear sliders</h4>
                            </div>
							<div class="card-body">
                                <div class="nonlinear-slider">
                                    <div id="slider-non-linear-step"></div>
                                    <span class="example-val" id="slider-non-linear-step-value"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Number formatting</h4>
                            </div>
							<div class="card-body">
                                <div class="format-slider">
                                    <div id="slider-format"></div>
                                    <input class="mt-4 form-control" title="Formatted number" id="input-format">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Getting and setting slider values</h4>
                            </div>
							<div class="card-body">
                                <div class="getnset-slider">
                                    <div id="slider"></div>
                                    <div class="logger mt-4">
                                        <button class="btn btn-primary btn-sm" id="write-button">Set to 20</button>
                                        <button class="btn btn-info btn-sm" id="read-button">Read slider value</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Locking sliders together</h4>
                            </div>
							<div class="card-body">
                                <div class="locked-slider">
                                    <div class="slider" id="slider1"></div>
                                    <span class="example-val" id="slider1-span"></span>
                                    <div class="slider mt-4" id="slider2"></div>
                                    <span class="example-val" id="slider2-span"></span>
                                    <button class="btn btn-danger btn-sm mt-4" id="lockbutton" style="float: right; margin: 20px 0 0;">Lock</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Moving the slider by clicking pips</h4>
                            </div>
							<div class="card-body">
                                <div class="extra-padding  mb-5">
                                    <div class="slider-pips">
                                        <div class="slider" id="slider-pips"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Colored Connect Elements</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-color">
                                    <div class="slider" id="slider-color"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Changing the slider by key press</h4>
                            </div>
							<div class="card-body">
                                <div class="keypress-slider pt-5">
                                    <div id="keypress"></div>
                                    <input type="text" class="form-control my-4" id="input-with-keypress-1">
                                    <input type="text" class="form-control" id="input-with-keypress-0">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Skipping steps</h4>
                            </div>
							<div class="card-body">
                                <div class="skipping-slider">
                                    <div id="skipstep"></div>
                                    <span class="example-val" id="skip-value-lower"></span>
                                    <span class="example-val" id="skip-value-upper"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Using the slider with huge numbers</h4>
                            </div>
							<div class="card-body">
                                <div class="hugenumber-slider">
                                    <div id="slider-huge"></div>
                                    <span class="example-val" id="huge-value"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Creating a toggle</h4>
                            </div>
							<div class="card-body">
                                <div class="toggle-slider">
                                    <div id="slider-toggle"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Soft limits</h4>
                            </div>
							<div class="card-body">
                                <div class="extra-padding mb-5">
                                    <div class="softlimit-slider">
                                        <div id="soft"></div>
                                    </div>
                                </div>
                            </div>
						</div>
					</div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider direction</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-direction">
                                    <div id="slider-direction"></div>
                                    <div class="example-val" id="field"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Color picker</h4>
                            </div>
							<div class="card-body">
                                <div class="extra-padding">
                                    <div class="colorpicker-slider">
                                        <div class="sliders" id="red"></div>
                                        <div class="sliders" id="green"></div>
                                        <div class="sliders" id="blue"></div>

                                        <div id="result"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider orientation</h4>
                            </div>
							<div class="card-body">
                                <div class="slider-orientation">
                                    <div id="slider-vertical" class="slider-vertical"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--**********************************
            Content body end
        ***********************************-->


        <!--**********************************
            Footer start
        ***********************************-->
        <?php include 'elements/footer.php'; ?>
        <!--**********************************
            Footer end
        ***********************************-->

       

        
    </div>
    <!--**********************************
        Main wrapper end
    ***********************************-->

    <!--**********************************
        Scripts
    ***********************************-->
    <!-- Required vendors -->
<?php include 'elements/page-js.php'; ?>
	
    
</body>
</html>