Formulir & Masukan
Slider (Penggeser Nilai)
Kontrol geser untuk memilih nilai kuantitatif atau rentang dalam batasan tertentu.
Slider memungkinkan pengguna memilih nilai numerik fleksibel (misal: radius pencarian fasilitas kesehatan atau batas jarak zonasi sekolah).
Pratinjau Komponen
Radius Fasilitas Kesehatan Terdekat
5 km
Penggunaan CSS Murni
<label for="jarak-zonasi" class="mjl-label">Radius Jangkauan</label>
<input id="jarak-zonasi" type="range" class="mjl-slider" min="1" max="50" value="10">
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<label class="mjl-label" for="radius">Radius Jangkauan: <output for="radius" id="radius-nilai">10</output> km</label>
<input id="radius" name="radius" type="range" class="mjl-slider" min="1" max="50" value="10"
oninput="document.getElementById('radius-nilai').value = this.value">
<script setup lang="ts">
import { ref } from 'vue';
import { MjlSlider } from '@majalengka/vue';
const radius = ref(10);
</script>
<template>
<label class="mjl-label" for="radius">Radius Jangkauan: {{ radius }} km</label>
<MjlSlider id="radius" v-model="radius" :min="1" :max="50" :value-text="`${radius} kilometer`" />
</template>
import { useState } from 'react';
export function SliderRadius() {
const [radius, setRadius] = useState(10);
return (
<>
<label className="mjl-label" htmlFor="radius">Radius Jangkauan: {radius} km</label>
<input id="radius" type="range" className="mjl-slider" min={1} max={50} value={radius}
onChange={(e) => setRadius(Number(e.target.value))} aria-valuetext={`${radius} kilometer`} />
</>
);
}
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-slider-radius',
standalone: true,
template: `
<label class="mjl-label" for="radius">Radius Jangkauan: {{ radius() }} km</label>
<input id="radius" type="range" class="mjl-slider" min="1" max="50" [value]="radius()"
(input)="radius.set(+$any($event.target).value)" [attr.aria-valuetext]="radius() + ' kilometer'" />
`,
})
export class SliderRadius {
radius = signal(10);
}
<label class="mjl-label" for="radius">Radius Jangkauan (km)</label>
<input id="radius" name="radius" type="range" class="mjl-slider" min="1" max="50"
value="{{ old('radius', $filter->radius ?? 10) }}">
<label class="mjl-label" for="radius">Radius Jangkauan (km)</label>
<input id="radius" name="radius" type="range" class="mjl-slider" min="1" max="50"
value="<?= (int) ($_GET['radius'] ?? 10) ?>">
Isi value-text bila angka mentah kurang bermakna saat dibacakan (mis. nominal rupiah).