এইচডিএমএল 5 রেঞ্জ ইনপুটটি কীভাবে স্লাইডারের আগে এবং পরে আলাদা রঙ থাকতে পারে?

Question 1

এখানে চিত্র বর্ণনা লিখুন

আমি চাই বাম দিকটি সবুজ হোক এবং ডান দিকটি ধূসর হোক। উপরে চিত্র হিসাবে নিখুঁত হবে। সাধারণত খাঁটি সিএসএস সমাধান (কেবল ওয়েবকিট সম্পর্কে চিন্তা করা প্রয়োজন)।

এমন কি সম্ভব?

Question 2

খাঁটি সিএসএস সমাধান:

ক্রোম: থেকে ওভারফ্লো লুকান input[range]এবং ছায়া বর্ণের সাথে থাম্ব থেকে বামে সমস্ত স্থান পূরণ করুন।
আইই: চাকাটি পুনরায় উদ্ভাবনের দরকার নেই:::-ms-fill-lower
ফায়ারফক্সের চাকাটি পুনরায় উদ্ভাবনের দরকার নেই:::-moz-range-progress

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

<input type="range"/>

স্নিপেট প্রসারিত করুন

Question 3

যদিও গৃহীত উত্তরটি তাত্ত্বিকভাবে ভাল, এটি এড়িয়ে যায় যে থাম্বটি তখন দ্বারা কেটে ফেলা ছাড়া ট্র্যাকের আকারের চেয়ে বড় হতে পারে না overflow: hidden। কীভাবে সামান্য কিছুটা জেএস দিয়ে এটি পরিচালনা করবেন তার এই উদাহরণটি দেখুন।

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + this.value + '%, #fff ' + this.value + '%, white 100%)'
};

#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

<div class="chrome">
  <input id="myinput" type="range" value="50" />
</div>

স্নিপেট প্রসারিত করুন

Question 4

হ্যা এটা সম্ভব. যদিও আমি এটির সুপারিশ করব না কারণ input rangeসমস্ত ব্রাউজারগুলি সত্যই সঠিকভাবে সমর্থন করে না কারণ এইচটিএমএল 5 এ যুক্ত হওয়া একটি নতুন উপাদান এবং এইচটিএমএল 5 কেবল একটি খসড়া (এবং দীর্ঘস্থায়ী হবে) তাই স্টাইলিংয়ের দিকে যাওয়া সম্ভবত সেরা নয় পছন্দ

এছাড়াও, আপনার খুব সামান্য জাভাস্ক্রিপ্টের প্রয়োজন হবে। সরলতার উদ্দেশ্যে আমি এর জন্য jQuery লাইব্রেরি ব্যবহারের স্বাধীনতা নিয়েছি ।

আপনি এখানে যান: http://jsfiddle.net/JnrvG/1/ ।

Question 5

এটির একটি ছোট আপডেট:

আপনি যদি নিম্নলিখিতটি ব্যবহার করেন তবে এটি মাউস রিলিজের পরিবর্তে ফ্লাইতে আপডেট হবে।

"মাউসমেভ পরিবর্তন করুন", ফাংশন "

<script>
$('input[type="range"]').on("change mousemove", function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #2f466b), '
                + 'color-stop(' + val + ', #d3d3db)'
                + ')'
                );
});</script>

Question 6

@ ডার্গু 3 এর উত্তরের উপরে বিল্ডিং , আপনি যদি থাম্বটিকে ট্র্যাকের চেয়ে বড় হতে চান তবে আপনি <input type="range" />উপাদানটির পুরোপুরি সুবিধা নিতে এবং ক্রস ব্রাউজারে যেতে চান, আপনার জেএস এবং সিএসএসের কিছুটা অতিরিক্ত লাইন দরকার।

ক্রোম / মজিলা উপর আপনি ব্যবহার করতে পারেন linear-gradientকৌশল, কিন্তু আপনি উপর ভিত্তি করে অনুপাত ঠিক করতে min, max, valueবৈশিষ্ট্যাবলী হিসাবে উল্লেখ করেছে এখানে দ্বারা @Attila মন্ত্রণালয় । আপনি এটি এজ এ প্রয়োগ করছেন না তা নিশ্চিত করতে হবে, অন্যথায় থাম্ব প্রদর্শিত হবে না। @ জিফ্রি লালৌé এখানে আরও বিশদে এটি ব্যাখ্যা করেছেন ।

আরেকটি বিষয় উল্লেখযোগ্য, এটি হ'ল আপনাকে rangeEl.style.height = "20px";আইই / ওল্ডারের সমন্বয় করতে হবে । সরলভাবে বলা যায় কারণ এই ক্ষেত্রে "উচ্চতা ট্র্যাকটিতে প্রয়োগ করা হয় না তবে থাম্ব সহ পুরো ইনপুট প্রয়োগ করা হয়"। ফিডাল

/**
 * Sniffs for Older Edge or IE,
 * more info here:
 * https://stackoverflow.com/q/31721250/3528132
 */
function isOlderEdgeOrIE() {
  return (
    window.navigator.userAgent.indexOf("MSIE ") > -1 ||
    !!navigator.userAgent.match(/Trident.*rv\:11\./) ||
    window.navigator.userAgent.indexOf("Edge") > -1
  );
}

function valueTotalRatio(value, min, max) {
  return ((value - min) / (max - min)).toFixed(2);
}

function getLinearGradientCSS(ratio, leftColor, rightColor) {
  return [
    '-webkit-gradient(',
    'linear, ',
    'left top, ',
    'right top, ',
    'color-stop(' + ratio + ', ' + leftColor + '), ',
    'color-stop(' + ratio + ', ' + rightColor + ')',
    ')'
  ].join('');
}

function updateRangeEl(rangeEl) {
  var ratio = valueTotalRatio(rangeEl.value, rangeEl.min, rangeEl.max);

  rangeEl.style.backgroundImage = getLinearGradientCSS(ratio, '#919e4b', '#c5c5c5');
}

function initRangeEl() {
  var rangeEl = document.querySelector('input[type=range]');
  var textEl = document.querySelector('input[type=text]');

  /**
   * IE/Older Edge FIX
   * On IE/Older Edge the height of the <input type="range" />
   * is the whole element as oposed to Chrome/Moz
   * where the height is applied to the track.
   *
   */
  if (isOlderEdgeOrIE()) {
    rangeEl.style.height = "20px";
    // IE 11/10 fires change instead of input
    // https://stackoverflow.com/a/50887531/3528132
    rangeEl.addEventListener("change", function(e) {
      textEl.value = e.target.value;
    });
    rangeEl.addEventListener("input", function(e) {
      textEl.value = e.target.value;
    });
  } else {
    updateRangeEl(rangeEl);
    rangeEl.addEventListener("input", function(e) {
      updateRangeEl(e.target);
      textEl.value = e.target.value;
    });
  }
}

initRangeEl();

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 300px;
  height: 5px;
  padding: 0;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}


/*Chrome thumb*/

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 5px;
  /*16x16px adjusted to be same as 14x14px on moz*/
  height: 16px;
  width: 16px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*Mozilla thumb*/

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -moz-border-radius: 5px;
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge input*/

input[type=range]::-ms-track {
  width: 300px;
  height: 6px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 2px 0;
  /*remove default tick marks*/
  color: transparent;
}


/*IE & Edge thumb*/

input[type=range]::-ms-thumb {
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge left side*/

input[type=range]::-ms-fill-lower {
  background: #919e4b;
  border-radius: 2px;
}


/*IE & Edge right side*/

input[type=range]::-ms-fill-upper {
  background: #c5c5c5;
  border-radius: 2px;
}


/*IE disable tooltip*/

input[type=range]::-ms-tooltip {
  display: none;
}

input[type="text"] {
  border: none;
}

<input type="range" value="80" min="10" max="100" step="1" />
<input type="text" value="80" size="3" />

স্নিপেট প্রসারিত করুন

Question 7

আগের গৃহীত সমাধানটি আর কাজ করছে না ।

আমি একটি সাধারণ ফাংশন কোডিং শেষ করেছি যা rangeকার্সারের আগে প্রয়োজনীয় বারটি যুক্ত করে একটি স্টাইলযুক্ত ধারকটিতে আবৃত করে । আমি এই উদাহরণটি লিখেছিলাম যেখানে সিএসএসে দুটি নীল 'নীল' এবং 'কমলা' সেট দেখতে সহজ, তাই সেগুলি দ্রুত সংশোধন করা যায়।

Question 8

আপনি যদি প্রথম উত্তরটি ব্যবহার করেন তবে থাম্ব নিয়ে সমস্যা রয়েছে। ক্রোমে আপনি যদি থাম্বটি ট্র্যাকের চেয়ে বড় হতে চান তবে বাক্সের ছায়াটি থাম্বের উচ্চতা দিয়ে ট্র্যাকটিকে ওভারল্যাপ করে।

এই সমস্ত উত্তরগুলির সংক্ষিপ্তসার করুন এবং সাধারণত বৃহত্তর স্লাইডারের থাম্ব সহ স্লাইডার লিখেছেন: জেএসফিডাল

const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value

slider.style.background = `linear-gradient(to right, red 0%, red ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%)`

slider.oninput = function() {
  this.style.background = `linear-gradient(to right, red 0%, red ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)`
};

#myinput {
  border-radius: 8px;
  height: 4px;
  width: 150px;
  outline: none;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  width: 6px;
  -webkit-appearance: none;
  height: 12px;
  background: black;
  border-radius: 2px;
}

<div class="chrome">
  <input id="myinput" type="range" min="0" value="25" max="200" />
</div>

স্নিপেট প্রসারিত করুন

Question 9

এটি এখন ওয়েবকিট, ফায়ারফক্স এবং আইই এর প্রতিটি সিউডো উপাদানগুলির সাহায্যে সমর্থিত। তবে অবশ্যই এটি প্রত্যেকের মধ্যে আলাদা। : (

দেখুন এই প্রশ্নের 'র উত্তর এবং / অথবা CodePen খেতাবধারী অনুসন্ধান prettify <input type=range> #101কিছু সমাধানের জন্য।

Question 10

input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

উপরের কোড পরিসীমা ইনপুট স্টাইল পরিবর্তন করে .....