چگونه ایجاد می‌شود: اسلایدرهای محدوده

اسلایدر محدوده ایجاد کنید

مرحله اول - اضافه کردن 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; /* موسور در حالت قرار گرفتن روی آن */
{}

آزمایش کنید

مرحله سوم - اضافه کردن JavaScript:

برای نمایش ارزش فعلی اسلایدر، اسلایدر دینامیک با استفاده از JavaScript ایجاد کنید:

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;
{}

آزمایش کنید