HTML input range değeri nasıl kullanılır?

Merhaba arkadaşlar, ben HTML'de <input type="range" min="0" max="100 value="50" ></input> kodunu kafamda düşündüğüm gibi yapmak istiyorum. Kafamda düşündüğüm şey bu şekilde;



Yani yapmak istediğim çok basit ama ben hiçbir şey bilmiyorum.
Kafamda sanki bu range çıktısını script ile değişkene aktarılacak ve bu değişken çıktı olarak yanına çıkacak ama inanın ki hiçbir şey bilmiyorum.
O yüzden bunu kod halinde yazar mısınız?

Ayrıca bu range değerinin arka plan rengini, ayrıca şu mavi yuvarlak daireyi kare yapmayı ve şu mavi rengi değiştirmeyi öğretebilir misiniz?

Şu an siz hazır kod istiyorsunuz. Hiçbir şey bilmediğinizi söylüyorsunuz, peki araştırdınız mı? Çok basit bir araştırma ile istediğiniz şeye ulaşabilirsiniz.

Size kodu yazarım, benim 1 dakikamı alır. Ancak siz öğrenmiş olmazsınız.

Yusuf1283 dedi:

Merhaba arkadaşlar, ben HTML'de <input type="range" min="0" max="100 value="50" ></input> kodunu kafamda düşündüğüm gibi yapmak istiyorum. Kafamda düşündüğüm şey bu şekilde;

Eki Görüntüle 1876463

Yani yapmak istediğim çok basit ama ben hiçbir şey bilmiyorum.
Kafamda sanki bu range çıktısını script ile değişkene aktarılacak ve bu değişken çıktı olarak yanına çıkacak ama inanın ki hiçbir şey bilmiyorum.
O yüzden bunu kod halinde yazar mısınız?

Ayrıca bu range değerinin arka plan rengini, ayrıca şu mavi yuvarlak daireyi kare yapmayı ve şu mavi rengi değiştirmeyi öğretebilir misiniz?

Genişletmek için tıkla...

Yolda olmasam kodları yazarak anlatırdım ama böyle idare et hocam

300319 dedi:

Şu an siz hazır kod istiyorsunuz. Hiçbir şey bilmediğinizi söylüyorsunuz, peki araştırdınız mı? Çok basit bir araştırma ile istediğiniz şeye ulaşabilirsiniz.

Size kodu yazarım, benim 1 dakikamı alır. Ancak siz öğrenmiş olmazsınız.

Genişletmek için tıkla...

Burada yazdığımız cevaplar da araştırmaya girmiyor mu zaten?

300319 dedi:

Şu an siz hazır kod istiyorsunuz. Hiçbir şey bilmediğinizi söylüyorsunuz, peki araştırdınız mı? Çok basit bir araştırma ile istediğiniz şeye ulaşabilirsiniz.

Size kodu yazarım, benim 1 dakikamı alır. Ancak siz öğrenmiş olmazsınız.

Genişletmek için tıkla...

Ben de kolay olduğunu biliyorum Türkçe de araştırıyorum, İngilizce de ama hepsi sadece şu max min ve value'yi gösteriyor.

ErrorCorrection dedi:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Yolda olmasam kodları yazarak anlatırdım ama böyle idare et hocam

Genişletmek için tıkla...

Evet W3 Schools sitesine bakıyordum ama üstteki linkinizi görmemiştim. My function'u da zaten çok defa başlangıç için baktığım sitelerde gördüm ama ilk Html ve Css'e baktığım için JavaScript'e bakmamıştım hiç. My function'u araştıracağım teşekkürler.

@111520 tam olarak öyle değil.

@Yusuf1283 evet, tam olarak o işlemler ile yapılıyor. Küçük bir araştırma ile istediğiniz şeyi öğrenebilirsiniz. Size kodu hazır bir şekilde attığımız zaman doğal olarak öğrenmiş olmuyorsunuz. Kendiniz yazarsanız öğrenmiş olursunuz. Yanlış anlaşılmasın.

300319 dedi:

@111520 tam olarak öyle değil.

@Yusuf1283 evet, tam olarak o işlemler ile yapılıyor. Küçük bir araştırma ile istediğiniz şeyi öğrenebilirsiniz. Size kodu hazır bir şekilde attığımız zaman doğal olarak öğrenmiş olmuyorsunuz. Kendiniz yazarsanız öğrenmiş olursunuz. Yanlış anlaşılmasın.

Genişletmek için tıkla...

Yok sıkıntı değil. Zaten çok çok başlangıçtayım ama araştırdığımda tam benim istediğim gibi bir web sayfası çıkmıyordu. Şu an size çok kolay geliyor bunlar bana da öyle ama şu an sadece bilmiyorum. Tüm etiketleri ve içindeki özellikleri öğrensem olup bitecek. HTML zaten çok kolay, CSS de öyle ama işte bilmeyince ve yolun başında olunca böyle kolay soruları sorup eleştirilebiliyor.

300319 dedi:

@111520 tam olarak öyle değil.

@Yusuf1283 evet, tam olarak o işlemler ile yapılıyor. Küçük bir araştırma ile istediğiniz şeyi öğrenebilirsiniz. Size kodu hazır bir şekilde attığımız zaman doğal olarak öğrenmiş olmuyorsunuz. Kendiniz yazarsanız öğrenmiş olursunuz. Yanlış anlaşılmasın.

Genişletmek için tıkla...

Keşke tüm Event listesini atsaydım da arkadaş baka baka bulsaydı daha yararlı olurdu bence.

@Yusuf1283 anlıyorum, JavaScript biraz karışık gelebilir HTML ve CSS'e göre. Ancak güzel bir şekilde öğrenirseniz JavaScript'i rahat bir şekilde yapabilirsiniz. Sizin için diyorum.

300319 dedi:

@111520 tam olarak öyle değil.

@Yusuf1283 evet, tam olarak o işlemler ile yapılıyor. Küçük bir araştırma ile istediğiniz şeyi öğrenebilirsiniz. Size kodu hazır bir şekilde attığımız zaman doğal olarak öğrenmiş olmuyorsunuz. Kendiniz yazarsanız öğrenmiş olursunuz. Yanlış anlaşılmasın.

Genişletmek için tıkla...

Zaten ben şu an 150 200 tane toz zerresi kadar etmeyecek satır yazdım ama hiçbirini hazır kod yazmadım. Çoğu etiketi de sallayarak yazıyorum ve şu ana kadar pek fazla sorun çıkmadı. Zaten ben eğer hazır kod görmezsem nasıl öğreneceğim ki etiketleri?

ErrorCorrection dedi:

Keşke tüm Event listesini atsaydım da arkadaş baka baka bulsaydı daha yararlı olurdu bence.

Genişletmek için tıkla...

Evet tam bana o lazım CSS için W3 Schools'tan tüm etiketleri buldum ama HTML'de yok.

300319 dedi:

@Yusuf1283 anlıyorum, JavaScript biraz karışık gelebilir HTML ve CSS'e göre. Ancak güzel bir şekilde öğrenirseniz JavaScript'i rahat bir şekilde yapabilirsiniz. Sizin için diyorum.

Genişletmek için tıkla...

Karışık diye bir şey demedim, şu ana kadar çok az satır yazdığım için ve bunların çoğu da deneysel olarak köşede beklediği ve tam anlamıyla bir bütünlük yaratmadığından JavaScript yüzü görmedim. Bu yüzden daha yüzünü görmediğim şeyin karışık olduğunu söyleyemem.

300319 dedi:

@Yusuf1283 anlıyorum, JavaScript biraz karışık gelebilir HTML ve CSS'e göre. Ancak güzel bir şekilde öğrenirseniz JavaScript'i rahat bir şekilde yapabilirsiniz. Sizin için diyorum.

Genişletmek için tıkla...

Ama zaten bunu hiç JavaScript görmediğimi bilerek önceden bir hatırlatma maksadıyla yazdığınızı düşünüyorum.

ErrorCorrection dedi:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Yolda olmasam kodları yazarak anlatırdım ama böyle idare et hocam

Genişletmek için tıkla...

JavaScript Event Listesini bekliyorum ayrıca şu JavaScript'li örneği buradan buldum.