changing css with jquery ui slider

Question

I have a div that has a border of 10px. What I want to do is change the size of the border by moving the jQuery UI slider widget.

HTML

<h1>Choose Your Size!</h1>
<div id="map">
<div id="detail">
    <div id="slider"></div>
     <div class="dataPt"></div>
</div>
</div>

jsfiddle

http://jsfiddle.net/NWztP/1/

Popnoodles · Accepted Answer · 2013-11-02 21:17:55Z

1

Never used this before, just looked at http://api.jqueryui.com/slider/#event-slide

$(function() {
    $( "#slider" ).slider({
        slide: function( event, ui ) {
            //console.log(ui.value);
            $('.dataPt').css({borderWidth: ui.value});
        }
    });
  });

Updated jsfiddle

To maintain a circle

$('.dataPt').css({borderWidth: ui.value, borderRadius: ui.value * 2});

http://jsfiddle.net/NWztP/3/

edited Nov 2, 2013 at 21:17

answered Nov 2, 2013 at 21:02

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

changing css with jquery ui slider

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related