

私はいまjavascriptで、fontsizeを変更するスライダーを実装しているのですが、  
ページを開いたとき、実際のサイズと、スライダー上の値が異なっています。

inputのvalueで設定しているように、javascriptの初期値valueも10にしたいです。  
（表示されるフォントのサイズは10pxなのですが）、スライダーでは中心に位置しています。

ページを開くと、一度スライダーのトグルが10付近に位置するのですが、すぐに中心に戻ります。  
ですので、javascriptのvalueが優先されていると考えました。  
こちらのjavascriptのvalueの設定方法をお教えいただきたいです。

※CSSではfontsizeに関して設定していません。

[code]

    <li><span class="filter-type">font-size</span>
    <input type="range" name="fontsize" id="slider0" min="1" max="50" value="10" onchange="changeFontSize()"></li>
    
    <div class=\"texts\" id=\"fontstyle\">テキスト</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
            function changeFontSize() {             
                    var size = document.getElementById('slider0').value;
                    document.getElementById('fontstyle').style.fontSize = size + 'px';
                }
    </script>
    
[/code]

このinput type="range"の値を、GET送信したいので、あまりHTMLの形は変えたくありません。  
しかし、変更しても送信できるような方法をご存知の方も、ご教授いただけたらと思っております。

お願い致します。


CC BY-SA 3.0
2015-11-15T08:05:37.863
18841
2015-11-15T08:05:37.863
12973
question
javascript html
Javascriptのスライダーの初期値について