Javascriptのスライダーの初期値について

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

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

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

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

<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>

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

お願い致します。