42889


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

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

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

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


CC BY-SA 3.0
2018-04-01T08:20:03.157
42845
2018-04-03T05:06:03.500
2018-04-01T08:36:12.157
2238
24854
question
javascript jquery
Sliderを斜めに表示する方法


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

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

[code]

    $("#slider").slider();
[/code]

[code]

    #slider {
      margin: 150px 10px;
      width: 300px;
      transform: rotate(-45deg);
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 3.0
2018-04-03T05:06:03.500
42889
2018-04-03T05:06:03.500
27930
42845
answer