1

ホームページ上でスライドバーを斜めに表示したい。
イメージとしては値が大きくなると、右上に上がっている様子を示したい。
(最終的に別で作った棒グラフと、融合させたいなと思っています)

スライドバー自体を横と縦に設置する方法は、
下記のHPを参考にして問題なくできました。
(初期値 0 最小値0 最大値5 移動値1)

http://alphasis.info/2011/06/jquery-ui-slider-value-min-max-step/

斜めに表示する方法って、何かありますでしょうか。
(直近バージョンのIEやFireFoxのブラウザで利用できれば、
 別途ライブラリを利用する形でも構いません。)

1 件の回答 1

3

CSSを使用して要素を斜めに表示することができます。

CSS3のtransformプロパティにrotate()関数を指定することで、要素が回転表示されます。
引数には回転させる角度(deg)を指定します。下記は、右上45°に伸びるスライダーの例です。

$("#slider").slider();
#slider {
  margin: 150px 10px;
  width: 300px;
  transform: rotate(-45deg);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

参考
○ rotate() - CSS: Cascading Style Sheets | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

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

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