CODEWITHSUNDEEP
javascriptjquery-ui-slider
janw
janw

Reputation: 49

Jquery UI Slider and Custom Style

I need help with my slider. I would like to style the dropdown (select box) here.

(http://awesomescreenshot.com/0f94xotzc6)

I need a style for ie9, ie10, safari, chrome and firefox. But I can't find any solutions :(

My best way was this one but there is a problem with the "after elements" from the UI Slider. In the front end, it looks like:

<select id="betrag" class="test" name="betrag">
<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-top:8px">

I can't place the div with the class "styled-select" like in the example

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

Every time it looks like this, in the front end

<div class="styled-select"" style="text-align:right">
<select id="betrag" class="test" name="betrag">
<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-top:8px">
</div>

In FF, Chrome it looks fine but IE had a problem with this.

How can I style the dropdown?

Upvotes: 1

Views: 195

Answers (1)

Locozade
Locozade

Reputation: 381

If I understand correctly, you want the slider's DIV to be injected in the DOM after the div with class .styled-select.

Assuming you are using the standard JQuery UI slider code from your link, you could just modify it from this:

var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({

to this:

var slider = $( "<div id='slider'></div>" ).insertAfter( $('div.styled-select') ).slider({

Upvotes: 1

Related Questions