Which Jotform slider is better for customization

Kalau untuk penggeser, bagusnya pakai yang mana ya? Misalnya saya mau ada gradasi warna dan ikon penggesernya diganti, bisa nggak? https://www.jotform.com/build/252267500639054

Hi Elfina,

Terima kasih telah menghubungi Dukungan Jotform. Slider bawaan Jotform lebih ringan karena tidak menggunakan iframe, sehingga tampilannya konsisten dengan elemen form lain dan bisa dikustomisasi melalui Inject CSS global di Form Designer. Namun, struktur HTML-nya banyak memakai inline style sehingga agak sulit di-override, dan tidak ada field khusus untuk CSS, sehingga kustomisasi bentuk atau efek visual lebih terbatas.

Sebaliknya, Slider Numerik (widget) lebih fleksibel untuk kustomisasi visual. Widget ini menyediakan field khusus untuk menyuntikkan CSS, sehingga lebih mudah menargetkan elemen seperti track dan handle. Dengan struktur yang sederhana, kustomisasi seperti gradasi warna, bentuk unik menggunakan clip-path, atau efek animasi bisa diterapkan dengan lebih leluasa.

Kekurangannya, slider ini berada di dalam iframe sehingga CSS global dari form tidak bisa langsung memengaruhinya. Selain itu, karena memuat iframe dan script tambahan, widget sedikit lebih berat dan kadang butuh styling ekstra agar selaras dengan desain keseluruhan form. Mari saya jelaskan caranya:

1. Pertama, salin kode ini:

/* penggeser bentuk wajik dan lajur bergradasi*/

.form-line[data-type="control_slider"] .form-input-wide table div[id] {

 width: 18px !important;

 height: 18px !important;

 background: #4cafef !important;

 border: 2px solid #1c7dbf !important;

 border-radius: 0 !important;

 transform: rotate(45deg); /* bikin jadi wajik */

 top: 2px !important; /* turunkan posisi supaya pas */

 cursor: pointer !important;

 box-sizing: border-box;

}

/* Berakhir di sini */

2. Di Pembangun Formulir, klik ikon Rol Cat di sisi kanan halaman untuk membuka Perancang Formulir.

3. Sekarang, di menu Perancang Formulir, klik tab Gaya, gulir ke bawah, lalu tempelkan kode ke dalam kotak Suntik Kode CSS. Selesai. Kode akan tersimpan secara otomatis.

Lihat tangkapan layar saya di bawah ini untuk melihat hasilnya:

Hubungi kami lagi jika ada hal lain lagi yang dapat kami bantu.