½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > CSS > ±âŸȿ°ú > ¹üÀ§¸¦ Ç¥ÇöÇÏ´Â ÀÎDz ½½¶óÀ̵å Range With Sliding Value »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
ASP
CSS
mysql
html
jquery
������
image
mobile
API
slide
°Ô½ÃÆÇ
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
¹üÀ§¸¦ Ç¥ÇöÇÏ´Â ÀÎDz ½½¶óÀ̵å Range With Sliding Value
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ±âŸȿ°ú
´Ù¿î·Îµå Ƚ¼ö 0 ȸ
°£´Ü¼³¸í À̵¿ÇÒ ¶§¸¶´Ù ¹üÀ§°¡ ³ªÅ¸³ª´Â ÀÎDz ½½¶óÀ̵åÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ



ÇØ´ç ÀÎDzÀº »ç¿ëÀÚ¿¡°Ô ´õ¿í Á÷°üÀûÀÎ ÀÎÅÍÆäÀ̽º¸¦ Á¦°øÇØ ÁÙ ¼ö ÀÖ½À´Ï´Ù.

½½¶óÀ̵带 À̵¿ÇÒ ¶§¸¶´Ù ¹üÀ§°¡ ³ªÅ¸³³´Ï´Ù.
À¥ÆäÀÌÁö¸¦ Á» ´õ ¿ªµ¿ÀûÀÌ°í ¸Å·ÂÀûÀ¸·Î ¸¸µé ¼ö ÀÖ½À´Ï´Ù.

HTML ±¸Á¶

<form class="range" action="">

<label class="range__label" for="dummy">Range</label>

<input class="range__input" id="dummy" type="range" value="25" min="0" max="50" step="1">

<div class="range__output" aria-hidden="true" data-tip>

<div class="range__output-value-track">

<div class="range__output-values" data-values></div>

</div>

</div>

</form>



CSS ¼Ò½º

* {

border: 0;

box-sizing: border-box;

margin: 0;

padding: 0;

}

:root {

--hue: 223;

--white: hsl(0,0%,100%);

--lt-gray: hsl(var(--hue),10%,95%);

--primary0: hsl(var(--hue),90%,95%);

--primary1: hsl(var(--hue),90%,90%);

--primary3: hsl(var(--hue),90%,50%);

--primary4: hsl(var(--hue),90%,30%);

--primary5: hsl(var(--hue),90%,10%);

--trans-dur: 0.3s;

font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320));

}

body,

input {

font: 1em/1.5 "DM Sans", sans-serif;

}

body {

background-color: var(--primary0);

color: var(--primary5);

height: 100vh;

display: grid;

place-items: center;

transition:

background-color var(--trans-dur),

color var(--trans-dur);

}


/* Main styles */

.range {

margin: 2.5em 0.75em 0 0.75em;

padding-top: 0.5em;

position: relative;

max-width: 12em;

width: 100%;

}

.range__label {

overflow: hidden;

position: absolute;

width: 1px;

height: 1px;

}

.range__input {

--percent: 50%;

background-color: var(--primary1);

background-image: linear-gradient(var(--primary3),var(--primary3));

background-size: var(--percent) 100%;

background-repeat: no-repeat;

border-radius: 0.25em;

display: block;

margin: 0.5em -0.75em;

width: calc(100% + 1.5em);

height: 0.5em;

transition: background-color var(--trans-dur);

-webkit-appearance: none;

appearance: none;

-webkit-tap-highlight-color: transparent;

}

.range__input:focus {

outline: transparent;

}


/* WebKit */

.range__input::-webkit-slider-thumb {

background-color: var(--white);

border: 0;

border-radius: 50%;

box-shadow: 0 0.125em 0.5em hsl(0,0%,0%,0.3);

width: 1.5em;

height: 1.5em;

transition: background-color 0.15s linear;

-webkit-appearance: none;

appearance: none;

}

.range__input:focus::-webkit-slider-thumb,

.range__input::-webkit-slider-thumb:hover {

background-color: var(--lt-gray);

}


/* Firefox */

.range__input::-moz-range-thumb {

background-color: var(--white);

border: 0;

border-radius: 50%;

box-shadow: 0 0.125em 0.5em hsl(0,0%,0%,0.3);

width: 1.5em;

height: 1.5em;

transition: background-color 0.15s linear;

}

.range__input:focus::-moz-range-thumb,

.range__input::-moz-range-thumb:hover {

background-color: var(--lt-gray);

}


/* Continue main styles */

.range__output,

.range__output:after,

.range__output-value-track,

.range__output-values {

position: absolute;

}

.range__output,

.range__output:after {

transform: translateX(-50%);

}

.range__output {

--percent: 50%;

background-color: var(--primary3);

border-radius: 0.25em;

color: var(--white);

padding: 0.25em;

bottom: calc(100% + 0.5em);

left: var(--percent);

text-align: center;

width: 2em;

height: 2em;

transition: background-color var(--trans-dur);

}

.range__output:after {

border-top: 0.5em solid var(--primary3);

border-left: 0.5em solid transparent;

border-right: 0.5em solid transparent;

content: "";

display: block;

top: calc(100% - 1px);

left: 50%;

width: 0;

height: 0;

}

.range__output-value-track {

inset: 0;

overflow: hidden;

}

.range__output-values {

--transX: 0;

display: flex;

align-items: center;

white-space: nowrap;

top: 0;

left: 0;

height: 100%;

transform: translateX(var(--transX));

transition: transform 0.15s linear;

}

.range__output-value {

width: 2em;

}


/* `:focus-visible` support */

@supports selector(:focus-visible) {

.range__input:focus::-webkit-slider-thumb {

background-color: var(--white);

}

.range__input:focus-visible::-webkit-slider-thumb,

.range__input::-webkit-slider-thumb:hover {

background-color: var(--lt-gray);

}

.range__input:focus::-moz-range-thumb {

background-color: var(--white);

}

.range__input:focus-visible::-moz-range-thumb,

.range__input::-moz-range-thumb:hover {

background-color: var(--lt-gray);

}

}


/* Dark theme */

@media (prefers-color-scheme: dark) {

body {

background-color: var(--primary5);

color: var(--primary1);

}

.range__input {

background-color: var(--primary4);

}

}



JS ¼Ò½º

window.addEventListener("DOMContentLoaded",() => {

const fr = new RangeSlidingValue("dummy");

});


class RangeSlidingValue {

constructor(id) {

this.input = document.getElementById(id);

this.output = document.querySelector('[data-tip]');

this.values = this.output?.querySelector("[data-values]");

this.init();

}

init() {

this.input?.addEventListener("input",this.update.bind(this));

this.populateValues();

this.update();

}

populateValues() {

const digitSpan = document.createElement("span");

digitSpan.className = "range__output-value";


const { min, max } = this.input;


for (let v = min; v <= max; ++v) {

const newSpan = digitSpan.cloneNode();

newSpan.innerText = v;

this.values?.appendChild(newSpan);

}

}

update(e) {

let value = this.input.defaultValue;

// when manually set

if (e) value = e.target?.value;

// when initiated

else this.input.value = value;


const min = this.input.min || 0;

const max = this.input.max || 100;

const possibleValues = max - min;

const relativeValue = (value - min) / possibleValues;

const percentRaw = relativeValue * 100;

const percent = +percentRaw.toFixed(2);

const tipWidth = 2;

const transXRaw = -tipWidth * relativeValue * possibleValues;

const transX = +transXRaw.toFixed(2);

const prop1 = "--percent";

const prop2 = "--transX";


this.input?.style.setProperty(prop1,`${percent}%`);

this.output?.style.setProperty(prop1,`${percent}%`);

this.values?.style.setProperty(prop2,`${transX}em`);

}

}


 
³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 38638816 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.