@extends('layout.mainlayout')
@section('content')
  	<!-- Page Wrapper -->
      <div class="page-wrapper cardhead">
        <div class="content ">
        
            <!-- Page Header -->
            <div class="page-header">
                @component('components.breadcrumb')
        @slot('title')
      Range Slider
        @endslot
    @endcomponent	
            </div>
            <!-- /Page Header -->
            
            <div class="row">
            
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Default</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_01">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Min-Max</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_02">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Prefix</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_03">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Range</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_04">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Step</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_05">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Custom Values</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_06">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Modern skin</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_13">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Sharp Skin</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_14">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Round skin</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_15">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->
                
                <!-- Rangeslider -->
                <div class="col-md-6">	
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Square Skin</h5>
                        </div>
                        <div class="card-body">
                             <input type="text" id="range_16">
                        </div>
                    </div>
                </div>
                <!-- /Rangeslider -->					
                    
            </div>				
        </div>	
    </div>
    <!-- /Page Wrapper --> 
@endsection