1

スライダーのつまみを、cssで画像に設定したいです。

#filter input[type = "range"]::-webkit-slider-thumb {
    width: 20px; height: 20px; border:0; cursor:-webkit-grab; -webkit-appearance: none !important; background:url("image/thumb.png") no-repeat 0 0;
}

としても、反映されませんでした。

CSSフィルタことはじめ(2)Qiita
HTMLやJavascriptは、こちらのサンプルコードを利用しています。

どうにか設定する方法はございますでしょうか?

※次のサイトのようにしますと、つまみに画像は設定されるのですが、cssフィルタとの連携がうまくできませんでした。
Customising Cross-Browser Range Inputs with CSS and JavaScript

1 件の回答 1

0

input要素自体にも-webkit-appearance: none;を指定する必要があるようです。

#filter input[type=range]{ -webkit-appearance: none; }

こうすると、スライダーの横線もデフォルトのスタイルが消えるので、::-webkit-slider-runnable-trackも設定します。

#filter input[type=range]{
	-webkit-appearance: none;
	width: 300px;
}

/* Chrome */
#filter input[type=range]::-webkit-slider-runnable-track{
	height: 5px;
	background: gray;
}
#filter input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	background: url("https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/2.1/action/1x_web/ic_face_black_48dp.png") no-repeat 0 0;
}

/* Firefox */
#filter input[type=range]::-moz-range-track{
	height: 5px;
	background: gray;
}
#filter input[type="range"]::-moz-range-thumb{
	width: 48px;
	height: 48px;
	margin-top: -24px;
	background: url("https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/2.1/action/1x_web/ic_face_black_48dp.png") no-repeat 0 0;
}
<div id="filter">
	<input type="range" id="blur" value="" min="0" max="10">
</div>

6
  • ありがとうございます!夜になるかと思いますが、帰宅したらさっそく試したいと思います!
    – rrrnnnn
    Commented 2015年11月23日 5:51
  • mjyさま 上記のコードを試させていただいたところ、動作したのですが、自分で用意した画像にすると表示されませんでした。urlを、'./image/thumb.png' や 'image/thumb.png'にすると、つまみとして存在はしているのですが、透明なのです。
    – rrrnnnn
    Commented 2015年11月23日 13:59
  • 用意した画像自体の問題なのかと思い、(つまみではなく)他のボタンで表示できている画像も指定してみましたが、同じでした・・・。
    – rrrnnnn
    Commented 2015年11月23日 14:07
  • 同じコードで画像によって駄目な物があるという事でしょうか。ちょっと理由が思いつかないです。解決しない場合、コードを添えて別の質問として投稿された方が他の方の目にもとまるので、よいかと思います。この質問を編集して追加するだけでもいいかもしれません。
    – mjy
    Commented 2015年11月23日 14:56
  • そうですね、同じコードでソースのurlだけ変えてみてダメでした。自分のimageディレクトリ内のpngや、google画像検索で出てきた先のurlは不可です。ご提示頂いたcdnjsにあるurlは機能します。何故なのでしょうねー…。ご親切にありがとうございます!
    – rrrnnnn
    Commented 2015年11月23日 15:06

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。