Change color of jQuery Slider based on the range selected in ASP.Net

Question

HiI want to create a slider which max and min will b bound from database and you can see the changed value in the lebel placed beside the controlAnd its color changes based upon the selected value100 200    180  Slider color will be red100 200    120  Slider color will be green

EmadKhan · Accepted Answer

Hi check this Fiddle HTML with Demolthtml xmlns34httpwwww3org1999xhtml34gtltheadgt    lttitlegtlttitlegt    ltstyle type34textcss34gt        slide                    margintop 20px            marginleft 20px            width 400px            background white                body                    fontfamily Arial            fontsize 10pt            ltstylegt    ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery172jqueryminjs34gtltscriptgt    ltscript src34httpajaxaspnetcdncomajaxjqueryui189jqueryuijs34 type34textjavascript34gtltscriptgt    ltlink href34httpajaxaspnetcdncomajaxjqueryui189themesblitzerjqueryuicss34        rel34stylesheet34 type34textcss34 gt    ltscript type34textjavascript34gt        documentreadyfunction              39slide139slid

Azim · Answer

Change this script in the below articleImplement Price Range Slider in ASPNet using jQuery Slider plugin and jQuery AJAXJQueryltscript type34textjavascript34gt    var min  0    var max  0    function          Get records for all prices        GetRecords0 0        function SetSlider         Intialize the slider        34priceslider34slider            min min            max max            step 5            values min max            stop function event ui                 var start  parseIntuivalues0                var end  parseIntuivalues1                34priceslidervalue34html34Rs34  uivalues0  34  Rs34  uivalues1                                    if uivalue gt 300                     thiscss                        39background39 34FD000034                                                    if uivalue lt 200

Change color of jQuery Slider based on the range selected in ASP.Net

Company

Explore

Follow us

Contact Us