progress
This commit is contained in:
parent
2205bc6a27
commit
ec7a1af1d0
@ -86,82 +86,114 @@
|
||||
.dual-form-wrapper .form-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Skala di atas slider */
|
||||
/* Skala di atas slider */
|
||||
.range-scale {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
margin-bottom: 8px;
|
||||
height: 45px;
|
||||
margin-top: 0px;
|
||||
border-top: 2px solid #495057;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.range-track-colored {
|
||||
position: relative;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.range-track-colored .range-colored {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
background: #ffffff; /* default putih, nanti diwarnai JS */
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* hilangkan track default browser */
|
||||
.range-colored::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
height: 8px;
|
||||
height: 10px;
|
||||
}
|
||||
.range-colored::-moz-range-track {
|
||||
background: transparent;
|
||||
height: 8px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* thumb */
|
||||
.range-colored::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
background: #0d6efd;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
.range-colored::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
background: #0d6efd;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
|
||||
.range-scale-item {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
font-size: 11px;
|
||||
color: #495057;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.range-scale-label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.range-scale-mark {
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
margin-top:-10px;
|
||||
background-color: #555;
|
||||
background-color: #495057;
|
||||
}
|
||||
|
||||
/* Tick besar tiap 10 */
|
||||
/* Tick besar untuk angka 1 dan kelipatan 10 */
|
||||
.range-scale-item-major .range-scale-mark {
|
||||
height: 12px;
|
||||
background-color: #000;
|
||||
width: 2px;
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
.range-scale-item-major .range-scale-label {
|
||||
font-weight: 600;
|
||||
color: #212529;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Tick khusus angka 1 biar lebih pendek (opsional) */
|
||||
/* Tick khusus angka 1 */
|
||||
.range-scale-item-one .range-scale-mark {
|
||||
height: 10px;
|
||||
height: 12px;
|
||||
background-color: #212529;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.range-scale-item-one .range-scale-label {
|
||||
color: #212529;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@ -430,28 +462,6 @@
|
||||
@elseif ($type === 'option_with_range')
|
||||
@if ($rangeMin !== null && $rangeMax !== null)
|
||||
<div class="range-slider-wrapper" data-range-wrapper="{{ $detail->id }}">
|
||||
<div class="range-scale" aria-hidden="true">
|
||||
@foreach ($rangeTicks as $tick)
|
||||
@php
|
||||
$value = (int) $tick['value'];
|
||||
$label = $tick['label']; // bisa null
|
||||
$isMajor = ($value === 1) || ($value % 10 === 0);
|
||||
$isOneTick = ($value === 1);
|
||||
@endphp
|
||||
<div class="range-scale-item
|
||||
{{ $isMajor ? 'range-scale-item-major' : '' }}
|
||||
{{ $isOneTick ? 'range-scale-item-one' : '' }}"
|
||||
style="left: {{ $tick['position'] }}%;">
|
||||
<span class="range-scale-mark"></span>
|
||||
|
||||
@if(!is_null($label))
|
||||
<span class="range-scale-label">{{ $label }}</span>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
|
||||
{{-- Track warna + slider --}}
|
||||
<div class="range-track-colored">
|
||||
<input type="range"
|
||||
@ -468,7 +478,27 @@
|
||||
@if ($isConsentQuestion) data-consent-input="1" required @endif
|
||||
@if($formLocked) disabled @endif>
|
||||
</div>
|
||||
<div class="range-scale" aria-hidden="true">
|
||||
@foreach ($rangeTicks as $tick)
|
||||
@php
|
||||
$value = (int) $tick['value'];
|
||||
$label = $tick['label']; // bisa null
|
||||
$isMajor = ($value === 1) || ($value % 10 === 0);
|
||||
$isOneTick = ($value === 1);
|
||||
@endphp
|
||||
|
||||
<div class="range-scale-item
|
||||
{{ $isMajor ? 'range-scale-item-major' : '' }}
|
||||
{{ $isOneTick ? 'range-scale-item-one' : '' }}"
|
||||
style="left: {{ $tick['position'] }}%;">
|
||||
<span class="range-scale-mark"></span>
|
||||
|
||||
@if(!is_null($label))
|
||||
<span class="range-scale-label">{{ $label }}</span>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="text-center mt-2 fw-semibold">
|
||||
Nilai saat ini:
|
||||
<span data-range-output="{{ $detail->id }}">{{ $rangeDefaultDisplay ?? $rangeMinDisplay }}</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user