ਕਿਵੇਂ ਬਣਾਓ: ਰੈਂਜ ਸਲਾਈਡਰ

ਰੈਂਜ ਸਲਾਈਡਰ ਬਣਾਓ

ਪਹਿਲਾ ਕਦਮ - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

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

ਦੂਜਾ ਕਦਮ - ਸੀਐੱਸਐੱਸ ਜੋੜੋ:

.slidecontainer {
  width: 100%; /* ਬਾਹਰੀ ਕੰਟੇਨਰ ਦੀ ਚੌੜਾਈ */
}
/* ਸਲਾਈਡਰ ਹੀਟਸੈਕ */
.slider {
  -webkit-appearance: none;  /* ਮੂਲਤਵੀ ਸੀਐੱਸਐੱਸ ਪੈਟਰਨ ਨੂੰ ਬਦਲੋ */
  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- (ਕਰੋਮ, ਓਪਰਾ, ਸਫਾਰੀ, ਐਜ਼) ਅਤੇ -moz- (ਫਾਇਰਫਾਕਸ) ਵਰਤੋਂ) */
.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 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਚਿੱਤਰ ਯੂਆਰਐੱਲ ਸ਼ਾਮਲ ਕਰੋ:

ਉਦਾਹਰਣ

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

亲自试一试