{"id":6059,"date":"2013-08-11T15:41:46","date_gmt":"2013-08-11T15:41:46","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6059"},"modified":"2014-11-09T20:33:44","modified_gmt":"2014-11-09T20:33:44","slug":"range-slider-con-jquery-ui","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/","title":{"rendered":"Range Slider con jQuery UI"},"content":{"rendered":"

En este art\u00edculo vamos a ver un poco como funciona el range slider de jQuery UI. Es un herramienta muy \u00fatil cuando quieres filtrar por ejemplo por precio un serie de registros.<\/p>\n

En el ejemplo que vamos a ilustrar vamos a mostrar un rango de precios de entre 0 y 300\u20ac. El usuario podr\u00e1 elegir un acotar los rangos y enviando ese rango mediante un formulario podemos filtrar los registros (productos) que tengan o est\u00e9n en ese rango seleccionado.<\/p>\n

\"range\"<\/p>\n

Para disponer de este filtro en nuestras p\u00e1ginas Webs ser\u00e1 necesario que a\u00f1adamos en la cabecera de la p\u00e1gina HTML la librer\u00eda jQuery, el custom de jQuery UI, la llamada al plugin y los estilos de jQuery UI.<\/p>\n

<link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/ui\/1.10.3\/themes\/smoothness\/jquery-ui.css\" \/>\r\n<script src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\r\n<script src=\"http:\/\/code.jquery.com\/ui\/1.10.3\/jquery-ui.js\"><\/script>\r\n<script>\r\n$(function() {\r\n\u00a0\u00a0 \u00a0$(\"#slider-range\").slider({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0range: true,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0min: 0,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0max: 500,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0values: [0, 300],\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0slide: function(event, ui) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#amount\").val(ui.values[ 0 ] + \"EUR-\" + ui.values[ 1 ] + \"EUR\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0});\r\n\r\n\u00a0\u00a0 \u00a0$( \"#amount\" ).val($(\"#slider-range\").slider(\"values\", 0) + \"EUR-\" + $(\"#slider-range\").slider( \"values\", 1) + \"EUR\");\r\n});\r\n<\/script><\/pre>\n
Los archivos que se est\u00e1n incluyendo los puedes conseguir personalizados en jqueryui<\/a>.<\/p>\n
Despu\u00e9s lo que hacemos es emplear el plugin slider para obtener el filtro de precios con rango de 0 a 300\u20ac.<\/p>\n
En el <body> tendr\u00edamos un formulario como el siguiente:<\/p>\n
<form action=\"index.php\" method=\"post\">\r\n<p>\r\n<label for=\"amount\">Rango de precios:<\/label>\r\n<input type=\"text\" id=\"amount\" name=\"range\" style=\"border: 0; color: #f6931f; font-weight: bold;\" \/>\r\n<\/p>\r\n<div id=\"slider-range\" style=\"width:300px;\"><\/div>\r\n<p><input type=\"submit\" name=\"send\" value=\"Enviar\" \/><\/p>\r\n<\/form><\/pre>\n
F\u00edjate en el input con id=\u00bbamount\u00bb estamos visualizando los valores del rango seleccionado.<\/p>\n
El objetivo de esta entrada es utilizar esta extensi\u00f3n de jQuery UI pero en el ejemplo en funcionamiento hemos ido m\u00e1s all\u00e1 interactuando directamente con una base de datos de un Prestashop y lo que estamos filtrando son productos o servicios.<\/p>\n
Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En este art\u00edculo vamos a ver un poco como funciona el range slider de jQuery UI. Es un herramienta muy \u00fatil cuando quieres filtrar por ejemplo por precio un serie de registros. En el ejemplo que vamos a ilustrar vamos a mostrar un rango de precios de entre 0 y 300\u20ac. El usuario podr\u00e1 elegir […]<\/p>\n","protected":false},"author":1,"featured_media":5093,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[84,52],"class_list":["post-6059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-formularios","tag-sliders"],"yoast_head":"\nRange Slider con jQuery UI - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Range slider de jQuery U es un herramienta muy \u00fatil cuando quieres filtrar por ejemplo por precio un serie de registros.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Range Slider con jQuery UI - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Range slider de jQuery U es un herramienta muy \u00fatil cuando quieres filtrar por ejemplo por precio un serie de registros.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-11T15:41:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-09T20:33:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/\",\"name\":\"Range Slider con jQuery UI - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png\",\"datePublished\":\"2013-08-11T15:41:46+00:00\",\"dateModified\":\"2014-11-09T20:33:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Range slider de jQuery U es un herramienta muy \u00fatil cuando quieres filtrar por ejemplo por precio un serie de registros.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Range Slider con jQuery UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Range Slider con jQuery UI - Jose Aguilar Blog","description":"Range slider de jQuery U es un herramienta muy \u00fatil cuando quieres filtrar por ejemplo por precio un serie de registros.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Range Slider con jQuery UI - Jose Aguilar Blog","og_description":"Range slider de jQuery U es un herramienta muy \u00fatil cuando quieres filtrar por ejemplo por precio un serie de registros.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-08-11T15:41:46+00:00","article_modified_time":"2014-11-09T20:33:44+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/","url":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/","name":"Range Slider con jQuery UI - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png","datePublished":"2013-08-11T15:41:46+00:00","dateModified":"2014-11-09T20:33:44+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Range slider de jQuery U es un herramienta muy \u00fatil cuando quieres filtrar por ejemplo por precio un serie de registros.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/range-slider-con-jquery-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Range Slider con jQuery UI"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6059"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6059\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5093"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}