كيفية إنشاء: شريط مقياس

إنشاء مقياس شريطي

الخطوة الأولى - إضافة HTML:

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

الخطوة الثانية - إضافة CSS:

.slidecontainer {
  width: 100%; /* عرض القالب الخارجي */
{}
/* الشريط نفسه */
.slider {
  -webkit-appearance: none;  /* غطاء النمط CSS الافتراضي */
  appearance: none;
  width: 100%; /* عرض كامل */
  height: 25px; /* الارتفاع المحدد */
  background: #d3d3d3; /* خلفية رمادية */
  outline: none; /* إزالة الهيكل الخارجي */
  opacity: 0.7; /* ضبط الشفافية (لإجراء تأثير مرور الفأرة) */
  -webkit-transition: .2s; /* تأثير انتقال 0.2 ثانية */
  transition: opacity .2s;
{}
/* تأثير مرور الفأرة */
.slider:hover {
  opacity: 1; /* عرض كامل عند مرور الفأرة */
{}
/* مقبض الشريط (استخدام -webkit- (Chrome،Opera،Safari،Edge) و -moz- (Firefox) لغطاء الظهور الافتراضي) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* غطاء الظهور الافتراضي */
  appearance: none;
  width: 25px; /* تحديد عرض مقبض السكربت المحدد */
  height: 25px; /* ارتفاع مقبض السكربت */
  background: #04AA6D; /* خلفية زرقاء */
  cursor: pointer; /* مؤشر الفأرة عند التمرير فوقها */
{}
.slider::-moz-range-thumb {
  width: 25px; /* تحديد عرض مقبض السكربت المحدد */
  height: 25px; /* ارتفاع مقبض السكربت */
  background: #04AA6D; /* خلفية زرقاء */
  cursor: pointer; /* مؤشر الفأرة عند التمرير فوقها */
{}

جرب بنفسك

الخطوة الثالثة - إضافة بايثون:

استخدم سكربت بايثون لإنشاء سكربت نطاق ديناميكي لعرض القيمة الحالية:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // عرض القيمة الافتراضية للسكربت
// تحديث القيمة الحالية للسكربت (كل مرة يتم سحب مقبض السكربت)
slider.oninput = function() {
  output.innerHTML = this.value;
{}

جرب بنفسك

سكربت دائري

لإنشاء مقبض سكربت دائري، استخدم border-radius الخصائص.

نصيحة:إذا كنت ترغب في ارتفاع غير متساوٍ (في هذا المثال 15 بكسل و 25 بكسل)، قم بتعيين ارتفاع السكربت إلى قيمة مختلفة عن أصبع السكربت:

مثال

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
{}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #04AA6D;
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
{}

جرب بنفسك

صورة/أيقونة السكربت

لإنشاء مقبض سكربت يحتوي على أيقونة/صورة، استخدم background إدراج عنوان الصورة URL:

مثال

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 23px;
  height: 25px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
{}

جرب بنفسك