How to have an image as a slider handle(CSS)
Question
I'd like to have on my HTML page a slider with an image as a handle. On the internet, I found something for this purpose that simply says to change the CSS background property: background: url('image.png'); ... but this didn't work for me. this is my slider setting:
.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:hover { opacity: 1; }.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: blue; cursor: pointer; }.slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: blue; cursor: pointer; }
So, do you know how to have an image as a handle? Thanks in advance, Greg
1 answers
solution1
0
body { overflow-y: scroll; } body::-webkit-scrollbar { background: black; } body::-webkit-scrollbar-thumb { background: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg') no-repeat; background-size: 50px 25px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <title>Document</title> </head> <body> <h3> Lorem ipsum dolor sit amet. consectetur adipiscing elit, Cras in accumsan lectus. id lacinia ante, In consectetur, arcu in tempus tempor, ipsum nulla porta ipsum. id pulvinar felis ante at dolor. Nam hendrerit egestas tellus quis dignissim. Praesent dictum felis eu pulvinar dictum. Quisque non venenatis magna. Donec molestie quis massa sit amet lobortis. Nulla a dictum augue, Sed vestibulum venenatis libero. quis tincidunt turpis ultricies vitae. Ut eget suscipit magna, Praesent rutrum egestas odio. sit amet elementum eros vestibulum nec. Vestibulum id viverra odio, Mauris lobortis tincidunt ipsum. non pulvinar massa molestie ut, Mauris pulvinar nibh in elit eleifend. eu tempor erat fringilla. Suspendisse aliquam congue metus vitae aliquam. Etiam finibus erat eget tellus volutpat bibendum. Pellentesque iaculis leo et tellus rhoncus commodo; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Mauris volutpat metus eu eros convallis hendrerit. Cras vitae rutrum quam, Vestibulum vitae consequat ex. non luctus nisi. Nam sollicitudin est vitae sapien finibus bibendum. Phasellus consequat laoreet odio a placerat. Ut sagittis eget lorem non interdum, Fusce ligula purus, rhoncus quis sagittis vitae. bibendum in diam. Aenean fringilla rutrum nisl. In at dictum mi, Praesent tortor arcu, imperdiet nec finibus non. dignissim sit amet sapien, Praesent placerat, metus nec ultrices luctus, dui erat mattis velit. vel mollis nibh lorem non lorem, Class aptent taciti sociosqu ad litora torquent per conubia nostra. per inceptos himenaeos, Curabitur luctus nisl leo. ut efficitur purus tincidunt ultricies, Nullam pretium velit non ante tempus. vel fringilla augue porttitor. Morbi iaculis risus at tincidunt vehicula. Phasellus nec quam a magna faucibus porta. Etiam mollis ultrices sem vitae imperdiet, Morbi posuere nulla efficitur, suscipit ante ut. ullamcorper lectus. Proin sit amet nisi at lacus viverra tristique. Quisque nec lacus quis lorem mollis mollis fringilla et ante. Morbi aliquam suscipit finibus, Nullam in odio congue, consequat eros eget. pellentesque mauris, Orci varius natoque penatibus et magnis dis parturient montes. nascetur ridiculus mus. Suspendisse cursus nulla vel cursus consequat. Nunc porta rhoncus pellentesque. In blandit dui a vehicula molestie, Aliquam efficitur, risus id laoreet vehicula, purus orci aliquet massa. ut eleifend neque arcu vitae nibh. Duis posuere at metus at pulvinar. Phasellus venenatis eu leo nec scelerisque. Phasellus maximus non sem quis viverra, Aliquam scelerisque nunc ac massa ullamcorper. at euismod nisi iaculis. Maecenas interdum sed enim eget ultrices. Curabitur eget rutrum mi, Aenean facilisis imperdiet elit. sit amet iaculis sem ornare eu, Fusce quis congue lorem. non cursus odio. Duis sodales elementum tellus sed volutpat. Mauris tincidunt massa et condimentum ultrices. Nulla blandit rhoncus elementum, Phasellus tincidunt turpis quam. imperdiet tincidunt eros gravida sit amet, Morbi in condimentum metus. in condimentum nulla, Aenean ac turpis mollis, rhoncus augue a. aliquet enim. Curabitur commodo tincidunt tellus id maximus, Cras dolor neque, gravida et dolor id. scelerisque laoreet diam. Donec rhoncus egestas est a pretium, Vivamus cursus congue felis. at auctor diam pharetra in. Suspendisse nec laoreet nunc. Morbi ut elementum ante. </h3> </body> </html>
First thing I noticed that you got wrong in your code is that you first have to assign ::-webkit-scrollbar so you would be able to design all inner element of an scrollbar after.
NOTE: This will only work on Chrome/Safari because it's -webkit-.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to convert a HTML CSS image slider into Angular image slider?
how to have an image slider with one selector?
css- how to add dynamic slider to image?
how to create image slider in laravel with css or jq
CSS responsive image slider
Image Slider CSS and jQuery
HTML, CSS image slider
how can we give slider to background image using css?
Add transition css to image slider
Image slider using css and javascript
Related Tags