jqueryのスライダ入力ボックスを隠す

Question

jquery Mobile 1.0を使用しています。

私はこのhtmlコードを持っています。このような

<label for="slider" class="ui-hidden-accessible"> 
    Input slider: 
</label> 
<input type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" /> 

そのレンダリング：

は、しかし、私は赤を削除するには、一部をマーク。私はスライダー部分だけを表示したい。

どうすればいいですか？

Answer 1

あなただけのアップ/ダウンの矢印を取り除きたい場合は、あなたが指定した幅/高さとoverflow : hiddenを持つ要素に入力をラップすることができます：

$(".ui-slider-input").wrap($('<div />').css({ 
    position : 'relative', 
    display : 'inline-block', 
    height : '36px', 
    width : '45px', 
    overflow : 'hidden' 
})); 

それともフレデリック・ハミディが述べたように、あなただけのスライダが表示されますすべて一緒にして唯一の要素を非表示にすることができます。 （あなたはJSで行うようにあなたが時間にCSSの実行を持っていないので、いいです）http://jsfiddle.net/EWQ6n/1/

はまた、あなたがCSSで入力要素を非表示にすることができます：ここでは

は、上記のコードのデモです：ここでは

.ui-slider-input { 
    display : none !important; 
} 

は、CSSを使用したデモです：http://jsfiddle.net/EWQ6n/2/

更新

!importantキーワードを使用する代わりに、より具体的なCSSルールを作成して、jQuery Mobileクラスよりも使用するようにすることもできます。例は次のようになります。

.ui-mobile .ui-page .ui-slider-input, 
.ui-mobile .ui-dialog .ui-slider-input { 
    display : none; 
} 

Answer 2

手動で入力コントロールを隠すことができます：

$("#yourPage").live("pageinit", function() { 
    $(".ui-slider-input").hide(); 
}); 

Answer 3

input.ui-slider-input { 
    display: none; 
} 

Answer 4

はあなただけあなたはそれがCSSアプローチを使用して行うと、あなたが入力を壊すことtype="text" data-type="range"

<input type="text" data-type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" /> 

Answer 5

を使用し、アップ/ダウン矢印を取り除きたい場合はその他の出願。だから、それを隠すために入力にclass="ui-hidden-accessible"クラスを追加してください。

class="ui-hidden-accessible"をlabelから削除します。

あなたのアプローチは正しいです。しかしclass="ui-hidden-accessible"をlabelにないinputに追加する必要があります。

あなたのコードは次のようにする必要があります：

<label for="slider">Input slider:</label> 
<input type="range" name="slider" id="@(Model.QuestionNo)_slider" 
    value="25" min="0" max="100" class="ui-hidden-accessible"/> 

チェックこのSAMPLE DEMO

Answer 6

<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible" /> 

それanoyを見て、私はあまりにもこれをやってみたかったが、私

.ui-slider-track { 
    margin: 0 15px 0 68px; ----> change to 10 
} 

Answer 7

をオフセットまた、スペースがなくなることを望んでいた。私はdiv要素に.NO-番号を追加

<div data-role="rangeslider" data-mini="true" class="no-number"> 
    <input type="range" name="Morn" id="Morn" data-mini="true" value="720" min="0" max="1439"> 
    <input type="range" name="Night" id="Night" data-mini="true" value="10800" min="0" max="1439"> 
</div> 

注意：私はこのこの方法（私は範囲スライダを使用しています）を達成しました。

CSSで次に

：

/* Used to remove the number next to the slider.*/ 
.no-number .ui-slider-input 
{ 
    display : none; 
    width: 0px; 
} 

/* Used to remove the space where the number was. */ 
.no-number .ui-rangeslider-sliders 
{ 
    margin: 0 5px; !important 
} 

私はすべて私が代わりに数字の時間のための範囲スライダを使用しようとしているということです大きな問題の一部としてこれをやっているので、私はそれらを置き換えます見出しのある要素は、時間を表示する関数で変更することができます。

これは完璧な選択ではないかもしれませんが、どこにスペースを戻すべきか分かりませんでしたので、ここに投稿すると思いました。

Answer 8

あなたは以下のように入力スライダーを削除することができます：

CSSの.ui-スライダー入力{ ディスプレイで行わ

input.ui-slider-input { 
     display: none; 
     width: 0; 
    } 


    .ui-slider-track { 
     margin: 0 15px 0 15px !important; 
    }